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

vue 单选框选中与取消选中 同时被 2 个专栏收录
1 篇文章 0 订阅
3 篇文章 0 订阅

在网上找了很久也没有找到自己想要的解决方案,于是乎自己便想了一个简单粗暴的解决方案。首先考虑radio是单选框,且vue的v-model赋值速度非常的快,取消选择又不会触发 radiochange 事件,使用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直接运行。

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值