一、实现效果:
二、代码实现:
不适用官方的change方法,自己定义点击方法。
动态判断定义的值是否等于遍历的值进行回显,如果和上一次点击的值一样,就把定义的值改为null
<template>
<view>
<radio-group>
<view v-for="(item, index) in list" :key="index">
<radio :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio>
<view>{{item.value}}</view>
</view>
</radio-group>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
value: '选项1',
id: '1'
},
{
value: '选项2',
id: '2'
},
{
value: '选项3',
id: '3'
}
],
radioValue: ''
}
},
methods: {
//自定义单选按钮的点击方法
radioCheck(index) {
this.list.forEach((item => {
item.isCheck = false
}))
if (this.radioValue == this.list[index].id) {
this.radioValue = null
} else {
this.radioValue = this.list[index].id
}
console.log(this.radioValue)
}
}
}
</script>