<el-radio v-model="value" @click.native="handleClick" :label="1">radio</el-radio> methods: { handleClick(el) { alert('点击') } }问题:发现点击事件被触发了两次。
原因:elementui中,el-radio控件包含了label和input标签,在el-radio上设置了点击事件,让两个标签都拥有了该事件,所有click方法被调用了2次。
解决办法
方法1. 增加prevent修饰符阻止事件传递
<el-radio v-model="value" @click.native.prevent="handleClick" :label="1">radio</el-radio>方法2. 因为都触发了input标签和label标签的点击事件,可以通过对应事件的标签作加判断阻止其中一个就可以了。
methods: { handleClick(el) { // 当是input标签触发的点击事件时,阻止该事件 if (el.target.tagName === 'INPUT') return alert('点击') } }