!!!原创解决了vantcell嵌套中radio图标无法取消的问题
1 基础用法
先贴一个官网的:
<van-radio-group v-model="checked">
<van-cell-group inset>
<van-cell title="单选框 1" clickable @click="checked = '1'">
<template #right-icon>
<van-radio name="1" />
</template>
</van-cell>
<van-cell title="单选框 2" clickable @click="checked = '2'">
<template #right-icon>
<van-radio name="2" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
一般自己使用是从对象中遍历产生radio选项,如例:
<van-radio-group @change="valueChange" v-model="level">
<van-cell-group inset>
<van-cell
v-for="(item, index) in options"
clickable
:key="index"
:title="item"
@click="clickCell"
>
<template #right-icon>
<van-radio :name="Number(index)" />
</template>
</van-cell>
</van-cell-group>
</van-radio-group>
2 对应的变量作用
上例中的level变量仅仅控制radio框是否勾选!!!在点击radio框时,level值会自动变化为radio绑定的name值,所以我们要获得稳定的level值不能依靠v-model里这个变量,需要另外定义一个trueLevel变量。
3 对应函数示例
valuechange函数:
const valueChange = ()=>{
level = trueLevel; // 让level的值受控,不因为点击radio框而随意改变
}
clickCell函数:
const clickCell = async(index) => {
if (trueLevel != Number(index)) {
// 点击非选中框,更改值生效
// ...
} else {
// 点击选中值,取消选中
// ...
}
level = trueLevel // 一定要让level受控于trueLevel!!!
}