2

Tengo 2 componentes ServicioListarComponent y ServicioCrearComponent. Dichos componentes los tengo registrados en mi app.js de la siguiente manera:

Vue.component('listar-servicios-component', require('./components/ServicioListarComponent.vue').default);
Vue.component('crear-servicio-component', require('./components/ServicioCrearComponent.vue').default);

new Vue({
    el: '#app'
})

dentro de mi componente ServicioListarComponent tengo la siguiente función:

<script>
    export default {
        mounted() {
            this.obtenerServicios();
        },
        data() {
            return {
                servicios: []
            }
        },
        methods: {
            obtenerServicios: function () {
                let self = this;
                axios.get('obtener-servicios')
                .then(function(response) {
                    console.log(response);
                    self.servicios = response.data;
                })
            }
        }
    };
</script>

Y en mi componente ServicioCrearComponent, estoy haciendo un insert y quiero que al insertarse este registro, llame a la función obtenerServicios que tengo en mi ServicioListarComponent. Este es el código de mi ServicioCrearComponent.

<script>
    export default {
        mounted() {
        },
        data() {
            return {
                nombre: '',
                costo: '',
                estatus: '1'
            }
        },
        methods: {
            crearServicio: function () {
                let self = this;
                axios.post('crear-servicio',{
                    'nombre': this.nombre,
                    'costo': this.costo,
                    'estatus': this.estatus
                }).then(function(response) {
                    swal.fire('El servicio ha sido agregado','','success');
                    $('#modalNuevoServicio').modal('hide');
                    self.obtenerServicios();
                }).catch(error => this.errors.record(error.response.data.errors));
            }
        }
    };
</script>

El self.obtenerServicios(); que tengo en mi componente ServicioCrearComponente no funciona, no encuentra dicha función y no se como llamar a esa función que se encuentra en mi ServicioListarComponent

1
  • 1
    Primero crea un componente padre que tenga como hijos a tus 2 componentes y luego en el componente hijo cuando guarde, manda un emit al componente padre y el componente padre a través de "refs" le dices al componente hijo de litsar que consulte de nuevo el servicio para que tenga la data actualizada. el 7 dic. 2019 a las 1:32

1 respuesta 1

2

Primero crea un componente padre que tenga como hijos estos 2 componentes:

<template>
  // aquí pones tus 2 componentes
 <listar-servicios-component ref="list"></listar-servicios-component>
 <crear-servicio-component @update="actualizarLista"></crear-servicio-component>
</template>

Obviamente creas el componente y los importas...

Ahora en el script solo tendras un metodo que recibe el emit del hijo (crear-servicio-componen) y al recibir ese emit, lanza el evento del listar a tráves de la referencia que le pusimos al "listar-servicios-component"

<script>
    export default {
        mounted() {
        },
        data() {
            return {}
        },
        methods: {
            // aqui llamamos al listar del componente que lista
            updateList() {
                 this.$refs.list.obtenerServicios();
            }
        }
    };
</script>

Por ultimo en el componente hijo que crea, luego que termina la promesa, haces el emit para que lo reciba el componente padre:

methods: {
            crearServicio: function () {
                let self = this;
                axios.post('crear-servicio',{
                    'nombre': this.nombre,
                    'costo': this.costo,
                    'estatus': this.estatus
                }).then(function(response) {
                    swal.fire('El servicio ha sido agregado','','success');
                    $('#modalNuevoServicio').modal('hide');
                    // aqui mandas el emit al componente padre
                    this.$emit('update', 'actualiza la lista');
                }).catch(error => this.errors.record(error.response.data.errors));
            }
        }

Eso es todo :D!

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.