Vue 两个元素绑定同一个点击事件，点击一个元素，两个元素同时触发点击事件

Question

<image @click="changeSrc()" style="width: 19px;height: 10px;margin-left: -20px;" :src="imgUrl" mode="">

<image @click="changeSrc()" style="width: 19px;height: 10px;margin-left: -20px;" :src="imgUrl" mode="">

两张图片绑定了同一个点击事件

changeSrc() {
if (this.imgUrl === '../../static/login/icon_yinc_h5.png') {
this.imgUrl = '../../static/login/icon_xs_h5.png'
this.inputType = 'text'
} else if (this.imgUrl === '../../static/login/icon_xs_h5.png') {
this.imgUrl = '../../static/login/icon_yinc_h5.png'
this.inputType = 'password'
}
}

Answer 1

2个的图片需要用2个变量，不能共用一个，共用一个你修改了当然同时变化了。inputType不知道你如何使用的，如果要分开控制也需要单独配置不同的变量

改下面就行了，有帮助请采纳，谢谢~

<div id="app">
<image @click="changeSrc" style="width: 19px;height: 10px;margin-left: -20px;" :src="imgUrl1" mode="" alt="1">

<image @click="changeSrc" style="width: 19px;height: 10px;margin-left: -20px;" :src="imgUrl2" mode="" alt="2">
</div>
<script src="https://unpkg.com/vue@next" data-vue="3.0"></script>
<script>
    Vue.createApp({
        data() {
            return {
                imgUrl1: "../../static/login/icon_yinc_h5.png",
                imgUrl2: "../../static/login/icon_yinc_h5.png"
            }
        },
        methods: {
            changeSrc(e) {
                var el = e.target;//当前点击的img对象
                var imgAttr = 'imgUrl'+el.getAttribute('alt');//获取alt属性，这个属性存储对应data对应的下标。
                if (this[imgAttr] === '../../static/login/icon_yinc_h5.png') {
                    this[imgAttr] = '../../static/login/icon_xs_h5.png'
                    this.inputType = 'text'
                } else if (this[imgAttr] === '../../static/login/icon_xs_h5.png') {
                    this[imgAttr] = '../../static/login/icon_yinc_h5.png'
                    this.inputType = 'password'
                }
            }
        }
    }).mount('#app');
</script>