1

Estoy mostrando una tabla en Vue.js todo funciona perfecto pero necesito mostrar en una columna el estado de una factura, el estado es traído a travez del consumo de un WebService, no se como seria la mejor forma de hacerlo intente hacerlo de esta manera, pero no estoy muy seguro de que lo este haciendo de manera correcta, y no funciona en lo absoluto , no pone ningún valor en el html cuando se ejecuta la función, aquí mi código:

getStatus(invoice){
  axios.get(`/electronic_billing/national/invoices/get_status_factible/${invoice}`).then(resp => {
     if(resp.data == 'true'){
       return '<h6 class="text-theme-9">Procesado correctamente</h6>';
     }else{
        return '<h6 class="text-theme-6">Pendiente</h6>';
     }
   }).catch(err => {
      console.log(err);
   });
}

y en la tabla cuando la recorro hago esto:

 <td class="w-40 border-b">{{ getStatus(row.numero) }}</td>

Alguna idea de como lo debo hacer de manera correcta, soy un poco novato en Vue.js y no veo mucha info de como puedo hacer esto, de ante mano muchas gracias

3
  • getStatus y getStatusFactible son lo mismo me imagino? Commented el 9 nov. 2020 a las 17:22
  • Gracias por la correccion , ya edite el post Commented el 9 nov. 2020 a las 18:32
  • getStatus() está dentro de methods o computed? Commented el 9 nov. 2020 a las 19:57

1 respuesta 1

0

create una constante con state:

const [numero, setNumero] = useState([]);

si estas usando component funcional, puedes usar useEffect

useEffect(() => {
    loadData();
  }, []);

entonces crea una funcion loadData()

loadData(){
    setNumero(getStatus(invoice)); // arriba no olvides importar la funcion getStatus
}

esta tu funcion puedes ponerla en un service

getStatus(invoice){
  axios.get(`/electronic_billing/national/invoices/get_status_factible/${invoice}`).then(resp => {
     if(resp.data == 'true'){
       return '<h6 class="text-theme-9">Procesado correctamente</h6>';
     }else{
        return '<h6 class="text-theme-6">Pendiente</h6>';
     }
   }).catch(err => {
      console.log(err);
   });
}

ahora ya tienes el valor en la constante numero

<td class="w-40 border-b">{{ getStatus(numero) }}</td>

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.