element的单选el-radio实现click点击事件,el-radio-group @click事件,@click.native.prevent

今天碰见一个需求, element的 el-radio-group 如果设置了默认值,那么默认选中的单选、是不能再次点击并且触发他的默认事件的。需求是既要默认还要能够点击触发。那么大多数人的想法是使用 @click.native,然后就出现了问题(没有禁止原生带的事件所产生的,绑定的值错误问题),下面给出解决方案(使用@click.native.prevent 相当于重写事件了)

<el-radio-group v-model="ybType" >
	<el-radio-button label="1" @click.native.prevent="radioChange('1')">红苹果</el-radio-button>
	<el-radio-button label="2" @click.native.prevent="radioChange('2')">青苹果</el-radio-button>
</el-radio-group>

给绑定的值、手动赋值

methods: {
	radioChange(ybType) {
		this.ybType = ybType
		//...业务逻辑
	},
}

你可能感兴趣的:(vue,前端,vue,elementui,el-radio)