I'm currently in the process of developing a Vue.js application using the Vue Webpack template. In one of my components, I'm setting up a Datatable like so:
<script>
export default {
name: 'DataTable',
mounted() {
$('#datatable').dataTable({
serverSide: true,
ajax: {
url: '/tableData',
},
processing: true,
searching: false,
pageLength: 25,
order: [[0, 'desc']],
columns: [
{
searchable: false,
data: 'updatedAt',
render: data => format(new Date(data), 'MMM Do, YYYY - h:mm:ss a'),
},
{
orderable: false,
data: 'user',
render: (data) => {
return `${data.firstName} ${data.lastName}`;
},
},
{
searchable: false,
orderable: false,
render() {
return '<a href="javascript:void" @click="openModal">View Details</a>';
},
},
],
});
},
methods: {
openModal() {
console.log('Open modal code goes here');
}
}
}
</script>Everything is working smoothly and the table is displaying correctly in the browser. My query revolves around how I can trigger the openModal() method within the datatable itself. I've attempted to call the method within columns[2].render, but it doesn't seem to be functioning (most likely due to Vue not compiling the returned string). Is there a way to resolve this and make it work seamlessly?