Estoy haciendo un sitio web, en Vuejs, para un proyecto universitario.
El alcance de la función es averiguar si un libro está configurado como favorito y, luego, devolver el nombre del icono para que establezca automáticamente el icono correcto.
Para hacer esto creé la función setIcon() :
setIcon: async function (id) { var favs = await DataService.getFav(); var isFav = favs.find((book) => book.id === id); if (isFav === undefined) { return "favorite_border"; } else { return "favorite"; } } La función, entonces, simplemente se llama en la parte HTML dentro de la etiqueta del icono.
Por motivos de depuración, eliminé la etiqueta del icono y dejé el botón uno, para poder ver cuál es el valor devuelto por la función como el nombre del Botón.
<md-button class="md-button" @click.stop="setFav(book.id)"> {{ setIcon(book.id) }} </md-button> El problema es que el valor que devuelve la función es un Promise Object y no la cadena "favorite_border" o "favorite" .
Entonces mi pregunta es ¿cómo puedo acceder al resultado de la promesa en la parte HTML?
También intenté poner la parte .then() después de setIcon() pero el resultado es el mismo
No tienes que usar async , prueba esto:
setIcon: function(id) { DataService.getFav().then((favs) = >{ var isFav = favs.find((book) = >book.id === id); if (isFav === undefined) { return "favorite_border"; } else { return "favorite"; } }) } si el método DataService.getFav() no tiene parámetros y obtiene el mismo resultado, debe almacenar en caché el resultado en el otro método; de lo contrario, cada ejecución setIcon llamará a DataService.getFav() , es una pérdida de rendimiento.