He intentado hacer que esto funcione todo el día y no tengo idea de lo que está sucediendo.
Tengo esta tabla html usando vue v-for (reduje el código para que quede más claro):
<table id="timeSheet-datatable" class="table table-striped dt-responsive w-100"> <thead> <tr> <th>Project</th> </tr> </thead> <tbody> <tr v-for="(timeSheet,index) in timeSheetListPageable"> <td>{{getProjectById(timeSheet.projectId)}}</td> </tr> </tbody>y tengo este js:
async getProjectByIds(param){ var result = ''; await axios .get(`/project/${param}`).then(response => { result= response.data.name; }, response => { (err) => console.log(err) }); return await result; }, getProjectById(param){ const data = this.getProjectByIds(param); console.log(data) return data; }, El problema es que no sé por qué la devolución no funciona, los resultados de la tabla son espacios vacíos, y si agrego async y espero al método getProjectById , la devolución es [object Promise] .
El archivo console.log dentro de la propiedad getProjectById funciona, muestra los retornos correctos de Axios, pero el retorno a la tabla no funciona. Ya intenté cambiar muchas cosas en este código, ¿alguna sugerencia?
await await result after axios.then() no dará como resultado el flujo secuencial esperado.
Debe usar promesas o varias declaraciones de await para que el código sea legible y se ejecute correctamente.
async getProjectByIds(param){ var result = ''; try { var response = await axios.get(`/project/${param}`) result = response.data.name; } catch (err) { console.error(err) } return result; }, async getProjectById(param){ const data = await this.getProjectByIds(param); console.log(data) return data; }, No estoy seguro acerca de la declaración real de response.data . Puede o no tener que usar un await allí.