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:

Código inicial Código final
Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Vue 3 desde cero?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬