Estilos CSS y atributos dinámicos

Nuestro objetivo en esta lección del Curso de Vue 3 es señalar cuando un resultado ya se encuentra entre los favoritos guardados.

Para ello tenemos clases CSS preparadas.

.favorite {
  transition: transform 0.3s ease-out;
}

.favorite--selected {
  transform: scale(1.3);
}

    

Vamos a crear el nuevo método checkFavorite, que nos devuelva si el id de un resultado ya se encuentra dentro de los favoritos.

checkFavorite(login) {
    return this.result?.login === login
}

    

Ahora solo tenemos que aplicarla la clase favorite--selected de forma dinámica. En la documentación puede ver que una de las formas más sencillas de conseguirlo es con la sintaxis de objeto. La parte de la izquierda (la key) sería la clase a aplicar y la derecha (el value) la expresión a comprobar. Si es verdadera, entonces aplicamos la clase (fíjate que usamos v-bind con el atributo class para hacerlo dinámico).

<div class="favorite" :class="{'favorite--selected': checkFavorite(favorite.login)}">
    ...
</div>

    

Enlaces

• https://vuejs.org/guide/essentials/class-and-style.html