Estoy tratando de llenar una tabla en el momento en que hago click en un botón de un formulario de búsqueda. Para esto estoy usando Laravel para montar la API y vue js 3 con composition API y composables. Cuando hago click en mi botón llamo a una función que obtiene los datos de mi formulario y mediante toRef
envío esos datos a mi composable, el cual los recibe en mi función getRegisters
y hace la petición a la API. Esta recibe los parámetros y hace la query. Una vez todo este proceso finalizado, mi componente de formulario, recibe los datos y debería llenar una tabla con estos datos. Todo hasta el momento de enviar los datos a mi otro componente, funciona bien. Muestro las partes de mi código relevantes para esto:
Mis datos cuando llegan al componente de formulario son 160 arrays:
Proxy(Array) {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}, 10: {…}, 11: {…}, 12: {…}, 13: {…}, …}
.....
Para enviar los datos a mi componente tabla estoy usando var registerData = ref([])
he probado también a usar: var registerData = reactive([]);
sin éxito
Esta referencia se le asigna valor al llamar a mi función searchRegister
al hacer click en mi botón:
<input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters()">
registerData.value = await getRegisters( toRef(param_search,'param_search') );
esta función searchRegister()
es una función async
. En esta función, está el console
que muestro.
retorno mi array de datos en return{}
dentro de setup()
return {
searchRegisters,
registerData
}
Incluyo mi componente tabla enviándole los parámetros:
<div class="tab-pane fade-in active" id="nasigned">
<div id="app5">
<nAsignedCalls :register-data="registerData"></nAsignedCalls>
</div>
</div
en mi tabla nAsignedCalls
recibiría los datos mediante una props
definida de tipo array:
export default defineComponent({
name: 'nAsignedCalls',
props: {
registerData: {
type: Array,
//default: () => ([])
}
},
y posteriormente haría un v-for con mis datos para crear la tabla:
<template v-for="item in registerData" :key='item'>
<tr>
<td>{{ item.id }}</td>
<td>{{ (item.name) ? item.name : '' }} </td>
<td>{{ (item.address) ? item.address : ''}}</td>
<td>{{ (item.province) ? item.province : ''}} </td>
...................
Pero siempre está vacía, no consigo mostrar los datos en ella. ¿Alguien podría decirme que estoy haciendo mal? ¿que me falta o me sobra?
Ejemplo de como tengo todo hecho
EDIT He continuado revisando y modificando, probando la respuesta que me dijeron aquí y he comprobado que efectivamente llegan mis datos. Para enviarlos a mi componente he usado reactive({}) ya que es un objeto:
const registers = reactive({"address":"CALLE CALLEJAS, 8",
"city":"PURULLENA",
"cp":"18519",
"created_at": "null",
"id":"895",
"mobile_phone":"null",
"name":"Aguilera Muriel Fatimas",
"phone":"958.690.236",
"province":"GRANADA",
"source":"",
"updated_at":"2021-11-05T07:35:30.000000Z"})
El resultado de esto es la tabla con las filas vacías:
Sin embargo si uso unicamente dataRegisters.id
por ejemplo, me muestra la tabla con todas las líneas duplicadas. Para mostrar los datos en mi tabla he probado a quitar la key y este es el resultado del v-for (con la key igual)
<template v-for="item in dataRegisters">
pero mis datos, en otra parte del componente se ven así:
{ "address": "CALLE CALLEJAS, 8", "city": "PURULLENA", "cp": "18519", "created_at": "null", "id": "895", "mobile_phone": "null", "name": "Aguilera Muriel Fatimas", "phone": "958.690.236", "province": "GRANADA", "source": "", "updated_at": "2021-11-05T07:35:30.000000Z" }
Creo que he acotado bastante el error y creo que viene por la manera de devolverlo de la API de Laravel, que lo estoy haciendo así:
/**
* FUNCTION TO RETURN REGISTER
*/
public function getRegister($parameter, $value){
try{
if($parameter == 'address'){
return ListingResource::collection(Listing::where('address', '=', $value)->all());
}else if($parameter == 'city'){
return ListingResource::collection(Listing::where('city', '=', $value)->get());
}else if($parameter == 'cp'){
return ListingResource::collection(Listing::where('cp', '=', $value)->get());
}
}catch(Exception $e){
return $e->getMessage();
}
}
y el resource
es así:
class ListingResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
*/
public function toArray($request)
{
return parent::toArray($request);
}
}
eso me devuelve:
data:
[{id: 895, name: "Aguilera Muriel Fatimas", address: "CALLE CALLEJAS,
8", province: "GRANADA",…},…]
[0 … 99]
0:
{id: 895, name: "Aguilera Muriel Fatimas", address: "CALLE CALLEJAS, 8",
province: "GRANADA",…}
Gracias por leerme y la ayuda. Toda recibida, es agradecida
registerData
, al menos renderizando fuera del v-for? o esta información llega 1 ves y al recibir nueva ya no llega más ? algo me parece falta en la redacción del problema