如何更改我点击的照片的路径，event.target？

Question

我是Vue新人，所以不要评判）

<Template>
    <div>
        <img :src="imgPath" @click="changePath(imgPath)">
        <img :src="imgPath" @click="changePath(imgPath)">
        <img :src="imgPath" @click="changePath(imgPath)">
    </div>
</Template>

<script>
export default {
    data: () => ({
        imgPath: require('../assets/img/photo_1.png'),
        imgPath1: require('../assets/img/photo_1.png'),
        imgPath2: require('../assets/img/photo_2.png'),
    }),

    methods: {
        changeAnswerImgN(imgPath) {
            if (imgPath == this.imgPath1) {
                this.imgPath = this.imgPath2;

            } else if (imgPath == this.imgPath2) {
                this.imgPath = this.imgPath1;
            }
        },
    },

    mounetd() {
        this.imgPath = this.imgPath1;
    },
}
</script>

问题是，当我点击任何照片时，它们会一起改变路径，但我只想改变我点击的照片的路径。

我尝试使用 event.target & $emit，但没有任何反应（

Answer 1

听起来像是对数组的完美使用，因为现在您只切换一个值 imgPath，当然，当您单击一张图像时，所有值都会发生变化。因此，考虑一个数组，您在模板中对其进行迭代，然后在单击时仅更改该图像源值：

data: () => ({
  imgPath1: require('../assets/img/photo_1.png'),
  imgPath2: require('../assets/img/photo_2.png'),
  // iterate this in template
  imgs: []
}),
methods: {
  changePath(img, index) {
    // toggle between the two images
    let newPath = img === this.path1 ? this.path2 : this.path1;
    // needed for change detection
    this.$set(this.imgs, index, newPath);
  }
},
mounted() {
  // you want all images to initially be the first
  this.imgs = Array(3).fill(this.imgPath1);
}

和模板：

<template v-for="(img, i) in imgs">
  <img :src="img" :key="i" @click="changePath(img, i)">
</template>

SANDBOX

如何更改我点击的照片的路径，event.target？

How to change the path of the photo I clicked on, event.target?

vue.js

vue-cli