Muy nuevo en Vue y js en ese asunto, lo más probable es que me haya perdido un problema fundamental básico, pero estoy tratando de alternar la clase de imágenes en las que se hizo clic individualmente dentro de mi matriz sin que todas las imágenes cambien de clase al mismo tiempo.
modelo :
<div class="collage-banner"> <img v-for="image in images" @click="imgSelected()" :alt="image.alt" class="collage" :class="image.class" :src="image.url" :key="image" />js:
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' } } }}
Avíseme si necesita más información, ¡lo más probable es que haya hecho esto de la manera completamente incorrecta! ¡Gracias por adelantado!
Puede pasar el índice de la imagen a su método imgSelected y usarlo para actualizar la clase de esa imagen.
Por ejemplo:
Modelo:
<img v-for="(image, index) in images" << updated @click="imgSelected(index)" << updated :alt="image.alt" class="collage" :class="image.class" :src="image.url" :key="image" />Guion:
methods: { imgSelected (index) { // add index param // use index to get relevant image from array this.images[index].class = 'collage-click' } }Si desea eliminar la clase de las imágenes seleccionadas, por ejemplo, el usuario hace clic en la imagen 1, luego en la imagen 2, también debe recorrer sus imágenes y restablecer la clase antes de actualizar la última imagen en la que se hizo clic.
P.ej
methods: { imgSelected (index) { // reset all image classes for (const i in this.images) { this.images[i].class = `img${i + 1}` // reset image class eg img2 (need to add 1 to index since it will start at 0) } // use index to get relevant image from array this.images[index].class = 'collage-click' } }Un mejor enfoque sería tener un indicador llamado " clicked " en la matriz de imágenes y alternar la clase en función de ese valor booleano.
data() { return { images: [ { url: img1, class: "img-1", clicked: false, alt: "collage img" }, { url: img2, class: "img-2",clicked: false, alt: "collage img" }, { url: img3, class: "img-3",clicked: false, alt: "collage img" }, { url: img4, class: "img-4", clicked: false, alt: "collage img" }, ] } }, methods: { imgSelected (index) { // add index param // use index to get relevant image from array this.images[index].clicked = !this.images[index].clicked; } }y en plantilla
<img v-for="(image, index) in images" << updated @click="imgSelected(index)" << updated :alt="image.alt" :class="['collage', {`${image.class}`: !image.clicked, 'collage-click': image.clicked}]" :src="image.url" :key="image" /> Nota: si desea que el collage se aplique siempre, puede tenerlo en la matriz. Si no desea la clase de collage en absoluto y solo quiere alternar entre img1 y collage-click , podría tener un objeto como
:class="{`${image.class}`: !image.clicked, 'collage-click': image.clicked}"