如何更改我单击的照片的路径，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

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