关于vue 单选框选中与取消解决方案

在网上找了很久也没有找到自己想要的解决方案，于是乎自己便想了一个简单粗暴的解决方案。首先考虑radio是单选框，且vue的v-model赋值速度非常的快，取消选择又不会触发 radio 的 change 事件，使用click事件去单纯的修改值会导致选中值瞬间勾选与取消了勾选。达不到想要的效果，可以考虑这种情形，因为radio的双向绑定，值是瞬间变化的，所以可以用一个 oldValue去保留上一次点击选中的值，这样去勾选时就不会影响到 oldValue ，保留拿到了oldValue值后，用 oldValue 去与现在的点击事件想要选中 / 取消 的值进行比对。话不多说，直接上代码,以 vant-ui为例（PS：其他的我个人认为不是逻辑层的框架代码，这种方案应该也是同理可解的）

<template>
	<van-radio-group v-model="radio">
	  <van-radio :name="item" v-for='(item,index) in list' @click="select(item)">单选框 {{item}}</van-radio>
	</van-radio-group>
</template>
<script>
export default{
	name:'xxx',
	data(){
		return {
			list:[1,2,3,4,5],//模拟数据
			radio:0, // radio双向绑定值 如果想要默认选中，修改初始值就行 ，这里我默认不选中，所以为0
			oldRadio:0, // 上一次选中的值
		}
	},
	methods:{
		select(item){
			if(item == this.oldRadio){
				// 取消选中 将 radio、oldRadio的值重置为0。oldRadio 重置是为了防止下次点中与新选中的值相同而判断错误
				this.radio = 0;
				this.oldRadio = 0;
			}else{
				// 选择了新的值，保留此次选择的值，用于下次对比
				this.oldRadio = item
			}
		}
	}
}
</script>

以上为纯手打。大家可自行copy直接运行。