I do not think that can work. Both DataTables and Vue start from the base that control the DOM, and those assumptions contradict each other. When DataTables inserts an element into the DOM and tries to add a Vue listener as @click
, at that point Vue has already renamed the DOM and interpreted the listeners. You will not hear directives added by hand by DataTables.
I would advise you to use a datatables plugin for vue. But to solve your specific doubt, what you could do is draw an HTML table via Vue and then instantiate DataTables on it.
For example, in the component:
export default {
name: 'Dtt',
data() {
return {
persons: [],
};
},
methods: {
showDrawUser(person) {
console.log('showDrawUser', person);
},
initDtt() {
$(document).ready(() => {
$("#dt_user_draw").DataTable({
"columns": [
{ "data": "user" },
{ "data": "email" },
{ "data": "registered_at" },
{ "data": "actions" }
]
});
});
}
},
mounted() {
$.ajax({
"method": "GET",
"url": 'url/example',
dataType: 'json'
}).then((res) => {
this.persons = res.data;
this.initDtt();
});
}
};
What it does is: when assembling the component, it makes a call, the data is brought. That data has the form:
{
"data": [{
"user": "Tiger Nixon",
"email": "[email protected]",
"registered_at": "2011/04/25"
},
{
"user": "Garrett Winters",
"email": "[email protected]",
"registered_at": "2011/07/25"
},
{
"user": "Ashton Cox",
"email": "[email protected]",
"registered_at": "2009/01/12"
},
{
"user": "Cedric Kelly",
"email": "[email protected]",
"registered_at": "2012/03/29"
},
{
"user": "Airi Satou",
"email": "[email protected]",
"registered_at": "2008/11/28"
}
]
}
you assign res.data
to the property persons
of the component.
In the HTML you have:
<div class="dtt">
<table id="dt_user_draw">
<thead>
<th>user</th>
<th>email</th>
<th>registered</th>
<th>action</th>
</thead>
<tbody>
<tr v-for="person in persons">
<td>{{person.user}}</td>
<td>{{person.email}}</td>
<td>{{person.registered_at}}</td>
<td>
<a @click="showDrawUser(person)">
<i class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
So, being populated the property persons
draws the rows of the table declaring its listeners and only then invoke DataTables to do the minimum: provide paging, sorting and search. p>