网上看了很多关于radio可取消选的的,但都没用,或者压根就说不行,自己琢磨了一下,根据文档上面写的确实不可以****我们需要改一改官方的方法及html代码,
效果图:
方法代码:
<radio-group>
<view v-for="(item, index) in items" :key="index">
<radio :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio>
<view>{{item.value}}</view>
</view>
</radio-group>
自己定义点击方法,摒弃官方给你change方法。
数据:
items:[
{value:'单选1',id:'1'},
{value:'单选2',id:'2'},
{value:'单选3',id:'3'}
],
radioValue:''
js:
radioCheck (index) {
this.items.forEach((item =>{
item.isCheck = false
}))
if(this.radioValue==this.items[index].id) {
this.radioValue =null
}else {
this.radioValue = this.items[index].id
}
console.log(this.radioValue)
}
逻辑:动态判断定义的值是否等于遍历的值进行回显,如果和上一次点击的值一样,就把定义的值改为null
帮助到你的话,记得点个赞支持i一下。