No creo que eso pueda funcionar. Tanto DataTables como Vue parten de la base que controlan el DOM, y esas suposiciones se contradicen. Cuando DataTables inserta un elemento al DOM y trata de añadirle un listener de Vue como @click
, a esas alturas Vue ya rendereó el DOM e interpretó los listeners. No va a escuchar directivas añadidas a mano por DataTables.
Yo te aconsejaría usar un plugin de datatables para vue. Pero para resolver tu duda puntual, lo que podrías hacer es dibujar una tabla HTML via Vue y después instanciar DataTables sobre ella.
Por ejemplo, en el componente:
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();
});
}
};
Lo que hace es: al montar el componente, hace un llamado, se trae la data. Esa data tiene la forma:
{
"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"
}
]
}
tú asignas res.data
a la propiedad persons
del componente.
En el HTML tú tienes:
<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>
De manera que, estando poblada la propiedad persons
dibuja las filas de la tabla declarando sus listeners y recién entonces invocas DataTables para que haga lo mínimo: proveer paginación, sorting y búsqueda.