@click v-for 中数据数组中的单个对象

Question

在这方面对 Vue 和 js 来说真的很新，很可能我错过了一个基本的基本问题，但我试图在我的数组中切换 class 单独点击的图像而不切换所有图像class同时

模板：

   <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'
        }
    }
}

}

如果需要更多信息，请告诉我，我很可能以完全错误的方式解决了这个问题！提前致谢！

Answer 1

您可以将图像索引传递到您的 imgSelected 方法中，并使用它来更新该图像的 class。

例如：

模板：

<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"
/>

脚本：

methods: {
    imgSelected (index) { // add index param
            // use index to get relevant image from array
            this.images[index].class = 'collage-click'
    }
}

如果您想从所选图像中删除 class，例如用户点击图片 1，然后点击图片 2，您还必须循环浏览图片并重置 class，然后再更新最新点击的图片。

例如

methods: {
        imgSelected (index) {
            // reset all image classes
            for (const i in this.images) {
               this.images[i].class = `img${i + 1}` // reset image class e.g. 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'
        }
    }

Answer 2

更好的方法是在图像数组中设置一个名为 clicked 的标志，并根据该布尔值切换 class。

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;
    }
}

并在模板中

<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"
/>

注意：如果您希望始终应用 collage，则可以将其放在数组中。如果您根本不想要拼贴画 class，只想在 img1 和 collage-click 之间切换，您可以只拥有一个像

这样的对象

:class="{`${image.class}`: !image.clicked, 'collage-click': image.clicked}"

@click v-for 中数据数组中的单个对象

@click individual object from data array within v-for

javascript

arrays

click

vue.js

v-for