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>