Want to put Vue event onclick inside KTDataTable column render method Metronic 9
I would like to putting Vue onclick event inside the column render method, If im putting regular Vue onclick event inside the template literal it doesnt work. Im using KTDataTable Remote Data Source in Metronic 9..
render: (item: any, data: any, context: any) => {
return `
<button type="button" class="btn btn-sm btn-icon btn-clear btn-light" @click.prevent="onClickEventHere">
<i class="ki-filled ki-eye"></i>
</button>
`;
},
Replies (2)
I find the discussion on implementing Vue onclick events in Metronic 9 interesting. Working with complex data tables and trying to integrate features like event listeners can be tricky, but it’s always rewarding when you find the right solution. On a different note, if you ever need to take a break from all that coding, I highly recommend trying some relaxing games at https://pirots3.com/. It’s a great way to unwind, offering a fun gaming experience that helps clear your mind before jumping back into your project!
Hi,
Sorry for the late reply.
It is not possible to add an event listener directly to an element when using the render function. The correct approach is to attach the event listener by referencing the DOM elements, as demonstrated below.
document.querySelectorAll(".buttons-selector").forEach(item =>
item.addEventListener("click", onClickEventHere)
);Regards,
Lauris Stepanovs,
Keenthemes Support Team
