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

【问题标题】：@click individual object from data array within v-for@click v-for 中数据数组中的单个对象
【发布时间】：2021-12-29 12:24:07
【问题描述】：

在这件事上 Vue 和 js 真的很新，很可能我错过了一个基本的基本问题，但我试图在我的数组中切换单独点击的图像类，而不是同时切换所有图像类。

模板：

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

}

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

【问题讨论】：

您要设置点击处理程序吗？你能确认你正在关注这个vuejs.org/v2/guide/events.html#Method-Event-Handlers
嗨，是的，我想设置一个点击处理程序，所以如果我点击（例如）第二张图片，只有第二张图片会改变它的类

标签： javascript arrays vue.js click v-for

【解决方案1】：

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

例如：

模板：

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

如果您想从所选图像中删除类，例如用户点击图片 1，然后点击图片 2，您还必须遍历图片并重置类，然后更新最新点击的图片。

例如

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

【讨论】：

效果很好，非常感谢！如果我想让点击事件成为切换类而不是添加类，会不会有很大不同？例如：用户点击图片 1，然后再次点击图片 1 以恢复到之前的课程？
@Dean 为此，您需要将设置类的行更改为： this.images[index].class=== 'collage-click' ？ img${index + 1} ? 'collage-click' 这使用条件语句来检查类是否已经是 'collage-click' 并且是否将其设置为 imgNUMBER 类

【解决方案2】：

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

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，那么您可以将它放在数组中。如果你根本不想要拼贴类，只想在 img1 和collage-click 之间切换，你可以有一个像

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

【讨论】：