Vue2单选框点击后可取消勾选的一种解决办法

Vue2单选框点击后可取消勾选的一种解决办法

因为原生html5的单选框一旦选中后无法指定取消勾选，于是在实践中尝试出了以下方法

通过鼠标事件来取消勾选

待修改的原生html代码

<template>
	<input type="radio" name="gender">男
	<input type="radio" name="gender">女
<template/>

思路是，在点击事件发生前判断radio的 checked 的值，如果为 false，将被点击的标签的 checked 改为 false
但是如果将方法绑定在 click 事件上，实际不会获得点击前的 checked 值，只会获得点击事件完成后的值

<template>
	<input type="radio" name="gender" @click="radioClick">男
	<input type="radio" name="gender">女
<template/>

methods:{
	redioClick(e){
		console.log('checked-0', e.target.checked)
		// 控制台输出：checked-0 true
	}
}

于是改用 mousedown 事件，但是radio标签本身具有click事件，因此无论在何种状态下点击单选框，radio都会自动勾选上，所以为了阻碍click，用vue的事件修饰符 prevent 来阻止click发生

<template>
	<input type="radio" name="gender" @mousedown="radioClick" @click.prevent>男
	<input type="radio" name="gender">女
<template/>

methods:{
	redioClick(e){
		console.log('checked-0', e.target.checked)
		var i = e.target.checked
		e.target.checked = !i
		console.log('checked-1', e.target.checked)
		// 控制台输出: checked-0 true
		//             checked-1 false
					   
	}
}

至此click可以取消勾选，但是click事件取消后将无法把radio标签所带的信息传入vm
如需要在radio中加入value属性来更新vm存储的表单信息

<template>
	<input type="radio" name="gender" v-model="gender" value="male" @mousedown="radioClick" @click.prevent>男
	<input type="radio" name="gender" v-model="gender" value="female" @mousedown="radioClick" @click.prevent>女
<template/>

data(){
	return{
		gender: null
	}
},
methods:{
	redioClick(e){
		console.log('checked-0', e.target.checked)
		var i = e.target.checked
		e.target.checked = !i
		console.log('checked-1', e.target.checked)
		console.log('gender', this.gender)
		// 控制台输出: checked-0 true
		//             checked-1 false
		//             gender null
					   
	}
}

这将导致vm接收不到DOM传来的数据，所以需要手动为vm更新

data(){
	return{
		gender: null
	}
},
methods:{
	redioClick(e){
		var i = e.target.checked
		e.target.checked = !i
		if(i === false){
			this.gender = e.target.value
		}
		else if(i === true){
			this.gender = '' // 取消勾选后将gender清空
		}
		console.log('gender', this.gender)
		// 点击 男 控制台输出 gender male
		// 再次点击 男 控制台输出 gender 			   
	}
}

到此可以简单实现radio标签的取消勾选和数据更新
但是如果业务中要求使用label来指定radio，如：

<template>
	<input type="radio" id="male" name="gender" v-model="gender" value="male" @mousedown="radioClick" @click.prevent><label for="male">男<label/>
	<input type="radio" id="female" name="gender" v-model="gender" value="female" @mousedown="radioClick" @click.prevent><label for="female">女<label/>
<template/>

data(){
	return{
		gender: null
	}
},
methods:{
	redioClick(e){
		var i = e.target.checked
		e.target.checked = !i
		if(i === false){
			this.gender = e.target.value
		}
		else if(i === true){
			this.gender = '' // 取消勾选后将gender清空
		}
		console.log('gender', this.gender)			   
	}
}

但是此时点击label后，将无法对响应的radio生效，原因大概就是因为前面 @click.prevent 了，为了解决这个问题，可以依照 radioClick 再配置一个方法，同时给radio添加上 ref 属性，之前的id属性在这里意义就不大了，当然for属性也可以用自定义属性

<template>
	<input type="radio" ref="male"  name="gender" v-model="gender" value="male" @mousedown="radioClick" @click.prevent><label for="male" @mousedown="labelClick">男<label/>
	<input type="radio" ref="female" name="gender" v-model="gender" value="female" @mousedown="radioClick" @click.prevent><label for="female" @mousedown="labelClick">女<label/>
<template/>

data(){
	return{
		gender: null
	}
},
methods:{
	redioClick(e){
		var i = e.target.checked
		e.target.checked = !i
		if(i === false){
			this.gender = e.target.value
		}
		else if(i === true){
			this.gender = '' // 取消勾选后将gender清空
		}
		console.log('gender', this.gender)			   
	},
	labelClick(e){
		// 逻辑同上一个方法类似
		var forRef = e.target.getAttribute('for')
		var i = this.$refs[forRef].checked
		this.$refs[forRef].checked = !i
		if(i === false){
			this.gender = this.$refs[forRef].value
		}
		else if(i === true){
			this.gender = ''
		}
		console.log('gender', this.gender)
		// 控制台输出同样有效
	}
}

本人菜鸟一枚~ 我这个思路并不难，但由于阻止了radio其原有的click事件，所以这种方法的逻辑可能并不是最简洁的，对于click和label也应该有更好的处理方式。如有更好的方法请多指教~