Mostrar favoritos
Personaliza la experiencia del usuario presentando de manera efectiva los favoritos que ha seleccionado
El objetivo de esta lección del Curso de Vue 3 es recuperar la información de un favorito y verlo en pantalla.
En realidad es una tarea muy sencilla. Basta con mover el favorito seleccionado a la propiedad result del modelo, que
es el lugar donde reside la información del usuario/a de GitHub que estamos viendo en nuestro proyecto.
Queremos que eso ocurra cuando se hace click sobre el favorito. Esto quiere decir que necesitamos usar eventos con Vue, algo que ya hemos hecho.
Primero, podemos crear el método local (en methods, no te olvides) showFavorite. Como ves el método acepta como
payload el favorito que quiero ver.
showFavorite(favorite)
{
this.result = favorite
}
,
Ahora, solo nos queda conectar los elementos del DOM que renderizan cada favorito con el nuevo método. Para ello tenemos
la directiva v-on, junto con el método click y el modificador prevent (de preventDefault) para que un
elemento a nativo sin href establecido no “salte” y mueva el scroll hacia arriba.
<a href="#" @click.prevent="showFavorite(favorite)">
<img :src="favorite.avatar_url" :alt="favorite.name" class="favorite__avatar">
</a>
Con todo ello, ya podemos visualizar los favoritos que tenemos guardados en almacenamiento local.
Enlaces importantes:
