Vue.js 如何更改我单击的照片的路径event.target？

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

导出默认值{
数据：（）=>({
imgPath:require（'../assets/img/photo_1.png'），
imgPath1:require（'../assets/img/photo_1.png'），
imgPath2:require（'../assets/img/photo_2.png'），
}),
方法：{
changeAnswerImgN（imgPath）{
if（imgPath==this.imgPath1）{
this.imgPath=this.imgPath2；
}else if（imgPath==this.imgPath2）{
this.imgPath=this.imgPath1；
}
},
},
莫内特（）{
this.imgPath=this.imgPath1；
},
}

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

---

我试图使用

event.target

和

$emit

，但什么也没发生（

听起来像是一个数组的完美用法，因为现在你只需切换一个值<代码> IMGPATH < /Cord>，当然，当你点击一个图像时，所有的变化都会发生变化。因此，考虑一个数组，你在模板中迭代，然后点击，只改变那个图像源值：

数据：（）=>({
imgPath1:require（'../assets/img/photo_1.png'），
imgPath2:require（'../assets/img/photo_2.png'），
//在模板中迭代此操作
imgs:[]
}),
方法：{
变更路径（img，索引）{
//在两个图像之间切换
让newPath=img===this.path1？this.path2:this.path1；
//需要进行更改检测
this.$set（this.imgs，index，newPath）；
}
},
安装的（）{
//您希望所有图像最初都是第一个
this.imgs=Array（3）.fill（this.imgPath1）；
}

和模板：

---

您应该将3个图像绑定到相同的数据属性。只要

imgPath

更改了该属性，所有图像的src都将更改。您可以将它们绑定到不同的数据属性并相应地更改它们，也可以直接触摸dom（不推荐）

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