0

Tengo 2 componentes, el componente hijo genera un emit al componente padre y luego de que se ejectura la funcion en el componente padre que retorne los datos al componente hijo, lo que tengo hecho es lo siguiente:

En el componente hijo realizo:

let data =  this.$emit('getData', this.search, this.pageSize);

y en el componente padre tengo los returns:

 getData(search, pageSize) {
         return axios.get(url, {
              params: {
                   search: search,
                   pageSize: pageSize
             }
         }).then(response => {
             his.users = response.data.data.data;

             return response.data.data;
           });
     },

el cual hago un return de lo que me devuelve la llamada axios, pero no recibo esos datos en el componente donde genero el $emit

Actualización

A continuación voy agregar los dos componentes. Lo que necesito que retorne son los datos de la paginación devuelta por Laravel : {page_current, total_pages}, que los recibo con axios, pero necesito pasarlo al otro componente luego que se ejecuta el $emit, así seteo los atributos que inicialicé con vue que es paginación: {from, to, total}. que a su vez estos son utilizados por el componente paginación pasados como props.

El componente padre tiene:

<template>
    <div class="well dt">
        <datatables :headers="headers" :items="items" @getData="getData">

            <tbody>
            <tr v-for="user in users" :key="user.id" class="text-center">
                <td>
                    {{user.first_name}}
                </td>
                <td>
                    {{user.email}}
                </td>
                <td>
                    -
                </td>
            </tr>
            </tbody>
        </datatables>
    </div>

</template>


    <script>
        import datatables from '../tables/datatables';

        export default {
            name: "userdraw",
            data() {
                return {
                    headers: [
                        {label: 'Usuario', name: 'first_name'},
                        {label: 'Email', name: 'email'},
                        {label: 'Acción', name: ''}
                    ],
                    // tableData: {},
                    users: [],
                    items: [5, 25, 50],
                    search: ''
                }
            },
            components: {
                datatables: datatables
            },

            methods: {
                getData(search, pageSize) {
                    return axios.get('/FinDraT/user/draw/' + window.location.pathname.split('/')[4] + '/getRegisteredUsers', {
                        params: {
                            search: search,
                            pageSize: pageSize
                        }
                    }).then(response => {
                        this.users = response.data.data.data;

                        return response.data.data;
                    });

                    // + pageSize + '/' + pageNumber + '?query=' + filter
                },
            }
        }

    </script>

y el componente hijo:

<template>

    <div>
        <div class="row filters">
            <div class="col-md-6 col-sm-12 mb-3">
                <span>Mostrar </span>
                <select class="form-control v-items" v-model="pageSize" @change="getData">
                    <option v-for="item in items">{{item}}</option>
                </select>
                <span> registros</span>
            </div>
            <div class="col-md-6 col-sm-12  mb-3">
                <div class="input-search pull-right">
                    <div class="input-group">
                        <input type="text" class="form-control" @keyup="getData" v-model="search"
                               :placeholder="placeholder">
                        <div class="input-group-append">
                    <span class="input-group-text" id="basic-addon2">
                       <i class="far fa-search"></i>
                    </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th v-for="header in headers" class="text-center">
                    {{header.label}}
                </th>
            </tr>
            </thead>
            <slot></slot>
        </table>
        <pagination :pagination="pagination"></pagination>
    </div>

</template>

<script>
    import pagination from './pagination';

    export default {
        name: "datatable",
        components: {
            pagination: pagination
        },
        mounted() {
            this.getData().then(data => {
                console.log( + data);
            });
        },
        watch:{

        },
        data() {
            return {
                search: '',
                pageSize: this.items[0],
                pagination: {
                    from: 0,
                    to: 0,
                    total: 0
                }
            }
        },
        props: {
            headers: '',
            placeholder: {
                type: String,
                default: 'Buscar...'
            },
            items: {
                type: Array,
                default() {
                    return [10, 25, 100, 'Todos']
                }
            }
        },
        methods: {
            getData() {

                    let items = this.$emit('getData', this.search, this.pageSize);

                });

            }
        }
    }

</script>
4
  • No funciona asi como pensas. Tenes que volver a llenar la propiedad que estas pasando al hijo. Ademas, el hijo necesita si o si ser notificado de que esa propiedad cambiio. Para eso usas un watch..
    – gbianchi
    el 23 ago. 2018 a las 15:58
  • @gbianchi tenés drama de ejemplificar lo que decís ? el 23 ago. 2018 a las 16:05
  • Para nada.. podrias agregar la llamada a tu componente y la propiedad que le estas pasando al mismo? tambien la prop en tu child... asi podemos armar un ejemplo con datos que se entiendan...
    – gbianchi
    el 23 ago. 2018 a las 16:09
  • @gbianchi ahi actualicé el post para que sea mas comprensible el 23 ago. 2018 a las 17:19

1 respuesta 1

1

Para que tu hijo reciba de vuelta la información, necesitas volver a pasarle la "prop" indicada.

El return de tu función, no le regresa nada a nadie, porque el emit solo dispara el evento, pero no espera una respuesta sobre el mismo.

Para ello, tu función es correcta respecto a tu llamada axios, pero deberia llenar items otra vez this.items = response.data.data. Podes eliminar el return tranquilamente.

Pero, el hijo no esta atento a los cambios reactivos del padre. Para que este atento tenemos que agregar un watch. Esto lo agregamos en el hijo.

Un watch no es mas que una funcion que esta atenta a los cambios reactivos en los valores.

watch: {
  items: function (newItems, oldItems) {
      this.items = newItems;
  }
},

De esta forma, estaremos atentos a los cambios en items.

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.