Mostrar favoritos

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:

• Vue event handing