Estoy usando Vue 2 y la API de composición. Mi componente actual recibe un accesorio de un padre y renderizo diferentes datos en función de él, en la pantalla: el accesorio se llama "resultado" y es de tipo Objeto, que contiene información múltiple. Recibo un "resultado" a la vez, pero se generarán múltiples; puede pensar en mi "resultado" como un resultado de búsqueda de Google, lo que significa que la página tendrá múltiples resultados.
El problema que tengo es que para una de las informaciones dentro de "resultado", necesito llamar a un método asíncrono y mostrar su resultado, que es lo que no puedo lograr.
Actualmente esto es lo que tengo:
<div> {{ getBoardName(props.result.boardReference) }} </div>Método dentro del script:
async function getBoardName(boardReference) { var result = await entriesApi.getBoardName({ boardReference: boardReference, }); return result; }Muestra "[promesa de objeto]", aunque si consola. log (resultado) justo antes de devolverlo, es justo lo que necesito, por lo que me parece que la interpolación en realidad no espera el resultado de la promesa.
También intenté usar "entonces" dentro de la interpolación:
{{ getBoardName(props.result.boardReference).then((value) => { return value; }) }}Estaba pensando en usar una propiedad calculada, pero no estoy seguro de cómo funcionaría, ya que la respuesta que necesito del método debe estar conectada a cada resultado individualmente.
Solicite más aclaraciones si es necesario.
Como pensó, la interpolación en realidad no espera el resultado, por eso tiene un objeto Promesa.
Como está usando la API de composición, lo que realmente puede hacer es usar un estado reactivo (usando la función ref() si está esperando un tipo primitivo, que parece ser el caso aquí, o la función reactiva() para objetos) y actualice el estado dentro del enlace del ciclo de vida onMounted() .
setup(props, context) { const boardGameName = ref(""); onMounted(async () => { boardGameName.value = await getBoardName(props.result.boardReference); }); async function getBoardName(boardReference) { var result = await entriesApi.getBoardName({ boardReference: boardReference, }); return result; } return { boardGameName, }; } Dado que está tratando con datos asíncronos, puede agregar un estado de carga para que pueda mostrar una rueda giratoria u otra cosa hasta que los datos estén disponibles.
Si la referencia de su tablero cambia con el tiempo, podría usar un observador para actualizar el nombre de su juego de tablero.
¡Buena suerte con tu proyecto!