1

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>
11
  • ¿El componente ButtonView está dentro del componente AllUser? Commented el 30 mar. 2021 a las 16:20
  • @BrayanMartínezSantana lo primero gracias por tu respuesta. Está importado. Actualizo mi pregunta para que puedas verlo Commented el 30 mar. 2021 a las 16:23
  • 1
    Si buttonView es un componente hijo del allUser, puedes Emitir un valor con un Evento desde buttonView y escucharlo desde allUser. Commented el 30 mar. 2021 a las 16:39
  • @porloscerrosΨ Gracias por tu respuesta, pero no entiendo muy bien como aplicar la documentación... en decir en mi "click" ya estoy llamando a mi función. según la documentación, debería de usar "emit" para pasar un evento... pero no entiendo que debo enviarle ni como. También estoy confuso si es un hijo de allUser, ya que solo estoy importandolo Commented el 30 mar. 2021 a las 16:46
  • @porloscerrosΨ ahí he añadido todo mi código de mis dos componentes Commented el 30 mar. 2021 a las 17:04

2 respuestas 2

3

Caso general (sin paquetes extras ni bibliotecas)

Puedes usar emitir un evento desde el componente hijo:

<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>

Y en el componente padre puedes responder al evento con: @[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>

Con el paquete laravel-vue-datatable

En este caso tienes que hacer tus componentes hijo lo más genericos posibles, en el caso de 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>

Puedes usar la siguiente demo (que soluciona el caso de laravel-vue-datatable) para guiarte mejor.

13
  • gracias por tu respuesta y tu tiempo. He aplicado lo que me has dicho, o eso creo ya que soy bastante novato con vue. pero no hace nada. Actualizo mi pregunta con el código actual de mis componentes allUser y buttonView Commented el 30 mar. 2021 a las 17:12
  • @scorpions78 y donde pusiste el emit y el recibir el evento en tu codigo? esta respuesta esta bien...
    – gbianchi
    Commented el 30 mar. 2021 a las 17:17
  • @gbianchi el emit lo he creado dentro del componente buttonView en .then en ese momento es cuando necesito que llame a recargar la tabla... No se si lo he hecho bien, lo dudo Commented el 30 mar. 2021 a las 17:19
  • Segui los pasos de esta respuesta. tu emit, tiene que ser en el momento que le decis al padre que ejecute una funcion... @scorpions78
    – gbianchi
    Commented el 30 mar. 2021 a las 17:22
  • 1
    @scorpions78 tu codigo esta correcto ahora.. salvo que falta donde esta el boton en tu template, y que a tu boton (en el padre) le pongas que lea el evento @ delete
    – gbianchi
    Commented el 30 mar. 2021 a las 17:44
2

Lo que según entiendo de tu pregunta, es que tratas de cambiar propiedades que recibe tu componente hijo desde un componente padre y, estos valores, recibirlos de nuevo en tu componente padre y que estos llamen a una función del mismo.

Suena confuso, pero creo que lo que necesitas son eventos personalizados. Te dejo un ejemplo:

Vue.component('button-test', {
  props: ['item'],
  data() {
    return {
    }
  },
  methods: {
    change() {
      this.$emit("state", ! this.item)
    }
  },
  template: '<button @click="change">Cambiar State</button>'
})

new Vue({
  el: "#app",
  data: {
    state: false
  },
  methods: {
    show(value) {
      console.log(this.state + ' data por defecto') // antes del cambio
      
      this.state = value //cambiamos la data del padre con la información desde el hijo
      
      console.log(this.state + ' nuevo valor en el padre') //despues del cambio
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button-test
    :item="state"
    @state="show"
  />
</div>

Te explico un poco: Recibo un props desde mi padre, con un status, este, al hacer click dentro de mi botón, llama a una función, emite un evento personalizado con un nuevo estado. En mi componente padre, lo recibo con su nombre, es decir @state, que ese fue el nombre de mi evento personalizado y le digo que va a ejecutar un función, en este caso, la función show que me muestra los valores por consola.

Espero te sirva de ayuda.

P.D: Te dejo esta lectura para que te des cuenta que incluso puedes pasar funciones como props y te dejo un ejemplo para que veas su funcionalidad:

Vue.component('child', {
  props: ['data'],
  template: '<button @click="data">Ejecutar</button>'
});

new Vue({
  el: "#app",
  methods: {
    parent() {
      console.log('Soy una función del padre llamada desde el hijo');
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child
    :data="parent"
  />
</div>

2
  • gracias por tu respuesta y tu tiempo, pero no es lo que necesito a mi parecer. Necesito llamar a una función desde otro componente... Desde luego soy muy novato con vue y no entiendo muy bien todo Commented el 30 mar. 2021 a las 17:23
  • Es lo que necesitas, porque si te fijas incluso puedes mandar como props funciones o métodos, es decir, solo debes mandar tu método como un props y manejarlo en tu componente hijo y hacer el custom event de vuejs para devolverlo al padre.
    – gaidyjg
    Commented el 30 mar. 2021 a las 17:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.