Caso general (sin paquetes extras ni bibliotecas)
Con el paquete laravel-vue-datatable
Puedes usar la siguienteEn este caso tienes que hacer tus componentes hijo lo más genericos posibles, en el caso de demo para guiarte mejor.ButtonView
:
<template>
<div>
<div class="row">
<a v-bind:href="'/admin/users/'+data.id+'/edit'">
<button :class="classes" title="Update">
<span>
<i class="fas fa-user-edit"></i>
</span>
</button>
</a>
<a href="#" @click="click(data)"> <!-- Usamos la función que pasamos -->
<button :class="classes" title="Update">
<span>
<i class="fa fa-trash red"></i>
</span>
</button>
</a>
</div>
</div>
</template>
<script>
export default {
props: {
data: {},
click: { // funcion que usaremos para pasar
type: Function,
default: () => {}
},
classes: {
type: Object,
default: () => ({
'btn': true,
'btn-primary': true,
'btn-sm': true,
}),
},
}
}
</script>
Mientras que en AllUser
solo debes de especificar el handler
dentro de columns
:
<template>
<div>
<data-table
:data="data"
:columns="columns"
@on-table-props-changed="cargar"
></data-table>
</div>
</template>
<script>
import ButtonView from "./ButtonView";
export default {
data() {
return {
tableProps: {
search: "",
length: 10,
column: "id",
dir: "asc",
},
columns: [
{ label: "ID", name: "id", orderable: true },
{ label: "Name", name: "name", orderable: true },
{ label: "Email", name: "email", orderable: true },
{
label: 'Acciones',
name: '', orderable: false,
handler: this.deleteUserById, // declaramos que función tomar al hacer click al ButtonView
component: ButtonView,
},
],
};
},
created() {
this.cargar(this.url);
},
methods: {
deleteUserById(data) { // esta es la función que tiene la lógica.
// llamamos a axios para borrar el id
alert('delete user' + data.id)
// recargamos la tabla
this.cargar()
},
cargar(url = this.url, options = this.tableProps) {
console.log(url, options)
// sustituimos esto por la llamada a axios 'get'
setInterval(() => this.data = {
data: [
{ id: 1, name: "bob", email: "foos@bar" },
{ id: 3, name: "alice", email: "foo@bar" },
],
},10)
},
},
};
</script>