Soy nuevo con vuejs, pero se me está dando el caso de que necesito desde un componente llamar a una función de otro.
Tengo un componente llamado allUser este tiene un método cargar()
y otro reloadTable()
.
Por otro lado tengo otro componente que se llama buttonView que tiene una función deleteUser(id)
al cual se le pasa el id
del usuario a eliminar y dentro de esta función hay un confirm
y un axios.post(url, {_method: 'DELETE'} )
que lo que hace es eliminar mi usuario.
Bien, el usuario se elimina perfectamente cuando confirmo, pero necesito si todo ha ido bien, hacer una llamada a la función reloadTable()
del componente allUser.
Estoy intentando con:
_this.$refs.reloadTable();
pero la consola me devuelve este error:
TypeError: Cannot read property 'reloadTable' of undefined
o si le paso como parámetro el array con las propiedades de mi datatable:
TypeError: _this.$refs.reloadTable is not a function
Las funciones de allUser, de cargar()
y reloadTable() son así:
cargar(url = this.url, options = this.tableProps){
axios.get(url, { params: options } )
.then((response) => {
this.data = response.data;
})
.catch((error) => console.error(error));
},
reloadTable(tableProps) {
this.cargar(this.url, tableProps);
},
y tableProps
es:
tableProps: {
search: '',
length: 10,
column: 'id',
dir: 'asc'
},
Espero me puedan ayudar, gracias de antemano. He visto que había bastantes preguntas sobre esto, pero no he encontrado sobre vue, todo era angular o react.
Update:
instancia de vue en laravl-8 en app.js
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('alluser', require('./components/allUser.vue').default);
Vue.component('createuser', require('./components/createUser.vue').default);
import DataTable from 'laravel-vue-datatable';
Vue.use(DataTable);
const app = new Vue({
el: '#contenedorVue',
});
Mi componente allUser:
<template>
<div>
<div class="">
<data-table :data="data" :columns="columns" @on-table-props-changed="reloadTable"></data-table>
</div>
</div>
</template>
<script>
import buttonView from './buttonView.vue';
export default {
data() {
return {
url: "/admin/vue/getAllUsers",
data: {},
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,
classes: {
'btn': true,
'btn-primary': true,
'btn-sm': true,
},
event: "click",
component: buttonView
},
],
}
},
components: {
buttonView,
},
created() {
this.cargar(this.url);
},
methods:{
cargar(url = this.url, options = this.tableProps){
axios.get(url, { params: options } )
.then((response) => {
this.data = response.data;
})
.catch((error) => console.error(error));
},
reloadTable(tableProps) {
this.cargar(this.url, tableProps);
},
},
}
</script>
Mi componente 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="deleteUser(data.id)">
<button :class="classes" title="Update">
<span>
<i class="fa fa-trash red"></i>
</span>
</button>
</a>
</div>
</div>
</template>
<script>
export default {
props: {
data: {},
name: {},
props: ["id"],
emit: "delete",
click: {
type: Function,
default: () => {}
},
classes: {
type: Object,
default: () => ({
'btn': true,
'btn-primary': true,
'btn-sm': true,
}),
},
},
methods: {
deleteUser(id) {
if(confirm("¿Está seguro de que quiere eliminar el usuario con id ? " + id)){
let url = '/admin/users/' + id;
axios.post(url, { _method: 'DELETE' })
.then(response => {
// Lanzamos el evento
this.$emit("delete", this.id);
}).catch(error => {
console.log(error);
})
}
},
}
}
</script>
ButtonView
está dentro del componenteAllUser
?buttonView
es un componente hijo delallUser
, puedes Emitir un valor con un Evento desdebuttonView
y escucharlo desdeallUser
.