P
General case (without extra packages or libraries)You can use an event from the child component:<template>
<button @click="borra">Borrar {{ index }}</button>
</template>
<script>
export default {
props: ["index"],
emit: "delete",
methods: {
borra() {
// Lanzamos el evento
this.$emit("delete", this.index);
},
},
};
</script>
And in the parent component you can answer the event with: @[nombre del evento]:<template>
<div>
List/Tabla
<div v-for="(elem,index) in arr" :key="index">
{{ elem }}
<ButtonView :index="index" @delete="updateTable"/>
</div>
</div>
</template>
<script>
import ButtonView from "./ButtonView";
export default {
components: {ButtonView},
data() {
return {
// esta es una variable donde guardas los resultados de axios
arr: ['a', 'b', 'c', 'd']
}
},
methods: {
updateTable(index) {
// aquí se haría la llamada a axios
// sería algo como axios.get('url').then(res => this.arr = res.data)
this.arr.splice(index, 1)
}
}
}
</script>
With the package laravel-vue-datatableIn this case you have to make your child components as generic as possible, in the case of 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>
While in AllUser Just specify the handler inside 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>
You can use the following https://codesandbox.io/s/wispy-thunder-q8ff2?file=/src/AllUser.vue (that solves the case of laravel-vue-datatableTo guide you better.
