Skip to main content
se añadieron 275 caracteres en el cuerpo
Origen Enlace
ZeroCool
  • 930
  • 5
  • 13

Actualización 4:

<div<form class="row justify-content-center">
   <!--fetchDataEnvolver noel recibebotón parámetroen un form evitando el event por defecto. -->
   <button class="btn btn-dark" @click="fetchData">Buscartype="submit" @click.prevent="fetchData">Buscar registros</button>
 </div>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.

<div class="row justify-content-center">
   <!--fetchData no recibe parámetro -->
   <button class="btn btn-dark" @click="fetchData">Buscar registros</button>
 </div>

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.

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.

Edición de respuesta: Corrección (composable)
Origen Enlace
ZeroCool
  • 930
  • 5
  • 13

-Actualizado: 23

<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 y en lugar de declarar en el componente la variable register la pasa como prop directamente. 

}

-Actualización 23: 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.

-Actualizado: 2

<div class="tab-pane fade-in active" id="nasigned">
    <div id="app5">
        <nAsignedCalls :registers="registers"></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 = ''
//Ya no necesita declarar registers, ahora pasa directamente la promesa del composable (resuelta) como prop.

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')) //Ahora no necesita usar async/await y en lugar de declarar en el componente la variable register la pasa como prop directamente.
}

-Actualización 2: 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:

-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.

Mejora de código en respuesta
Origen Enlace
ZeroCool
  • 930
  • 5
  • 13

-Actualizado: 2

<div class="tab-pane fade-in active" id="nasigned">
    <div id="app5">
        <nAsignedCalls :registers="registers"></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
constlet registersPropaddress = reactive({}) ''
//Ya Cambieno elnecesita nombre
vardeclarar addressregisters, =ahora ''pasa directamente la promesa del composable (resuelta) como prop.

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')) //Ahora no necesita usar async/await
  y registersPropen =lugar registersde declarar en el componente la variable register la pasa como prop directamente.
}

-Actualización 2: 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 resultaresuelta (axiosque viene en registers) y solo tendría que asignar a la variable registersdesde (en formTele...) para enviarlaformTelemarketing asignar directamente como prop a nAsignedCall evitando usar async/await y declarando variables temporales:

-Actualizado

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

let param_search = ref({}) //Ahora es reactiva
const registersProp = reactive({}) // Cambie el nombre
var address = ''

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')) //Ahora no necesita usar async/await
   registersProp = registers 
}

-Actualización: 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 resulta (axios) y solo tendría que asignar a la variable registers (en formTele...) para enviarla como prop a nAsignedCall

-Actualizado: 2

<div class="tab-pane fade-in active" id="nasigned">
    <div id="app5">
        <nAsignedCalls :registers="registers"></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 = ''
//Ya no necesita declarar registers, ahora pasa directamente la promesa del composable (resuelta) como prop.

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')) //Ahora no necesita usar async/await y en lugar de declarar en el componente la variable register la pasa como prop directamente.
}

-Actualización 2: 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:

Edición de sintaxis
Origen Enlace
ZeroCool
  • 930
  • 5
  • 13
Loading
Actualización de respuesta por actualización de la pregunta del usuario (Incluyen mejoras)
Origen Enlace
ZeroCool
  • 930
  • 5
  • 13
Loading
se añadieron 67 caracteres en el cuerpo
Origen Enlace
ZeroCool
  • 930
  • 5
  • 13
Loading
Origen Enlace
ZeroCool
  • 930
  • 5
  • 13
Loading