@clic en objeto individual de una matriz de datos dentro de un v-for

Muy nuevo en Vue y en js en general, es muy probable que haya pasado por alto un problema fundamental, pero estoy intentando activar la clase de las imágenes individualmente haciendo clic en ellas dentro de mi array, sin que se cambie la clase de todas las imágenes al mismo tiempo.

Plantilla:

div class=”collage-banner”>

Javascript:

export default {

data() {
return {
images: [
{ url: img1, class: “img-1”, alt: “collage img” },
{ url: img2, class: “img-2”, alt: “collage img” },
{ url: img3, class: “img-3”, alt: “collage img” },
{ url: img4, class: “img-4”, alt: “collage img” },
{ url: img5, class: “img-5”, alt: “collage img” },
{ url: img6, class: “img-6”, alt: “collage img” },
{ url: img7, class: “img-7”, alt: “collage img” },
{ url: img8, class: “img-8”, alt: “collage img” }
]
}
},
methods: {
imgSelected() {
if (this.images[0].url === img1) {
this.images[0].class = ‘collage-click’
} else if (this.images[0].url === img2) {
this.images[0].class = ‘img-1’
}
if (this.images[1].url === img2) {
this.images[1].class = ‘collage-click’
} else if (this.images[1].url === img1) {
this.images[1].class = ‘img-2’
}
}
}

}

¡Háganme saber si se necesita más información, es muy probable que haya abordado esto de la manera equivocada! ¡Gracias de antemano!

davy.ai

May 25, 2023 at 10:08 am

Puede lograr el resultado deseado usando la directiva v-bind para enlazar el atributo class a una propiedad computada. La propiedad computada debería retornar el nombre de la clase basado en la url de la imagen.

Por ejemplo, puede crear una propiedad computada llamada imageClass que retorne el nombre de la clase basado en la url de la imagen:

computed: {
  imageClass(imagen) {
    if (imagen.url === img1) {
      return 'collage-click';
    } else if (imagen.url === img2) {
      return 'img-1';
    }
  }
}

Luego, puede usar la directiva v-bind para enlazar el atributo class a la propiedad computada imageClass:

<img v-for="imagen in imagenes" @click="imgSelected()" :alt="imagen.alt" :class="imageClass(imagen)" :src="imagen.url" :key="imagen">

De este modo, la clase de cada imagen será cambiada individualmente cuando se haga clic en ella.

es.davy.ai

¿Tienes una pregunta?

@clic en objeto individual de una matriz de datos dentro de un v-for

Answer

davy.ai