1

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:

introducir la descripción de la imagen aquí

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

5
  • Verifico que este recibiendo 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
    – ZeroCool
    Commented el 1 abr. 2023 a las 18:32
  • @mafu gracias por su respuesta. Si lo he comprobado y nunca veo el contenido de registerData fuera del v-for... Commented el 2 abr. 2023 a las 7:15
  • Entonces no esta pasando nada por los props, es decir: registerData no esta funcionando: ` <nAsignedCalls :register-data="registerData"></nAsignedCalls>`. Pruebe pasando el prop y recibiéndolo simple, sin opciones de objeto {type,default, etc..} renderizándolo en el template: {{registerData}}
    – ZeroCool
    Commented el 2 abr. 2023 a las 19:34
  • @mafu mismo problema. No se que estoy haciendo mal mal no recibir nada en mi componente tabla... ese es el problema. Los datos los veo en mi console, pero no consigo hacer que llegen a mi componente tabla. He actualizado mi pregunta con un SFC que aunque no es reproducible, no consigo hacer que ejecutar mi código, se puede ver como está todo mi código y estructura. Gracias de antemano Commented el 4 abr. 2023 a las 16:40
  • 1
    @mafu he eliminado mi petición axios get que hago en mi código real y añadido en su lugar un array con la misma estructura de datos que recibo en mi petición a la API, lleno mi referencia y la retorno Commented el 4 abr. 2023 a las 16:43

1 respuesta 1

1

toRef: Se usa para crear una referencia reactiva a una variable y permite que cualquier cambio en la variable original se refleje en la referencia.(la referencia creada por toRef no es reactiva por sí misma, sino que está enlazada a la variable original)

El componente formTeleMarketing usa la varaible param_search como parámetro copia reactiva (toRef) de la función getRegisters pero está declarada como variable "normal", es decir, en realidad no es reactiva y por ende no se verán los cambios automáticamente en registers (que es el prop para la tabla) al ejecutarse fetchData. Entendiendo esto quiere decir que registers nunca recibirá ningún dato, por ello es que puede ver el "console" pero no recibir nada el prop.

-Actualizado: 3

<div class="tab-pane fade-in active" id="nasigned">
    <div id="app5">
        <!--Usando el prop fuera de una función-->
        <nAsignedCalls :registers="registers"></nAsignedCalls> 

        <!--Usando el prop dentro de una función (fetchData)-->
        <nAsignedCalls :propRegisters="propRegisters"></nAsignedCalls> 
     </div>
</div>

import { ref, toRef } from 'vue'
import nAsignedCalls from '../roomBooss/nasignedCalls'
import { getRegisters } from '../composables/nCalls' //Exportación nombrada (Simplificación)

let param_search = ref({}) //Ahora es reactiva
let address = ''
let propRegisters = ref([])
//Ya no necesita declarar registers, ahora pasa directamente la promesa del composable (resuelta) como prop (Fuera de una función)

//Fuera de una función puede pasar registers directamente como prop.
const { registers } = getRegisters(toRef(param_search, 'param_search'))

const fetchData = () => {
  //En vue puede usar v-model para esto
  address = document.getElementById('address').value
  if (address != '') {
    /*param_search es ahora reactiva, use: .value*/
    /*No olvide que param_search es usada como la variable, no como el parámetro de fetchData (explicación en el ultimo bloque)*/
    param_search.value['parameter'] = 'address'
    param_search.value['value'] = address
  }
//...
//...
  const { registers } = getRegisters(toRef(param_search, 'param_search'))
    propRegisters.value = registers  //Ahora no necesita usar async/await 

}

-Actualización 3: En cuanto al composable nCalls (que no funciona como un composable), esta retornando por defecto 2 claves (la función y una variable de la misma función) lo cual es un error en la promesa de getRegisters ya que debe retorna la promesa resuelta (que viene en registers) y solo tendría que desde formTelemarketing asignar directamente como prop a nAsignedCall evitando usar async/await y declarando variables temporales. En caso de querer usar el composable dentro de la función fetchData sí debe crear una variable y asignar el retorno del composable y pasarlo como prop.

 //nCalls
    import { ref, watchEffect } from 'vue'
    export const getRegisters = (param_search) => {
        const registers = ref([])
    
        watchEffect(async ()=>{
           try {
            const resp = await axios.get(param_search);
            const result = await resp.json()
    
            registers.value = result
           } catch (error) {
            console.log(error)
           }
        })
        return{
            registers //retorna la promesa resuelta
        } 
    
    }

Tambien tenga en cuenta que en el template de formTeleMarketing usa la función fetchData:

Actualización 4:

<form class="row justify-content-center">
   <!--Envolver el botón en un form evitando el event por defecto. -->
   <button class="btn btn-dark" type="submit" @click.prevent="fetchData">Buscar registros</button>
 </form>

Y esto sugiere un error de lógica, ya que en el SFC que comparte, espera un parámetro nombrado: param_search y según el ámbito es lo que se usa como parametro/arg de getRegisters. En conclusión ya que no pasa arg no lo use o estaría pasando un valor indefinido y no la variable reactiva creada.

ADD: Evitar el error en el botón que ejecuta la función fetchData envolviéndolo en un formulario usando @click.prevent añadiendo type: submit, ya que el mismo no dispararía la función.

13
  • lo primero agradecer todo tu tiempo en explicarme todo y hacer un ejemplo. He probado a hacer lo que me comentas, pero el console retorna esto: [Vue warn]: Unhandled error during execution of native event handler at <FormTelemarketing> at <App> warn @ app.js:7203 logError @ app.js:7393 handleError @ app.js:7385 (anónimo) @ app.js:7348 Promise.catch (asíncrono) callWithAsyncErrorHandling @ app.js:7347 invoker @ app.js:15616 app.js:20119 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'parameter') Commented el 5 abr. 2023 a las 9:28
  • actualizo mi ejemplo de SFC para que puedas ver mi código actual con las actualizaciones Commented el 5 abr. 2023 a las 9:28
  • he añadido un comentario en mi pregunta Commented el 5 abr. 2023 a las 12:02
  • y revisando tu respuesta, me doy cuenta de que hay un error. Porque param_search es lo que yo recibo en mi composable para hacer la consulta a mi API donde se llenan los datos y necesito mostrar es registers. Los datos son registros telefónicos de ahí ese nombre Commented el 5 abr. 2023 a las 12:43
  • Veo una actualización luego de estos comentarios. En cuanto al error: No lo hay, no digo que NO pase param_search al composable en mi respuesta. Lo que le describo es que esta mal pasarlo como parámetro de fetchData y no como la variable del componente por que fetchData no recibe nada en el template, entonces tendría error de sintaxis porque ese parámetro marcaria undefined.
    – ZeroCool
    Commented el 5 abr. 2023 a las 16:10

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.