刚接触vue 想问一下 我现在用的vue框架 套的vant 组件
单选框 一值无法实现 name值一值不对 想问 下 我这是哪边有问题啊
这边是html
<van-radio-group v-for="cluster in clusters"
:key="cluster.clusterId"
v-model="cluster.clusterId"
class="box-radio-group">
<van-radio class="box-radio"
name="0"
v-model="cluster.clusterId"
checked-color="#fbb427">{{cluster.clusterName}}</van-radio>
<label>{{cluster.clusterNum}} 人 ¥{{cluster.clusterAmount}}</label>
</van-radio-group>
这是数组类型
clusters: [
{
clusterId: 1,
clusterName: '全国直销通讯录',
clusterNum: 125456,
clusterAmount: 69
},
{
clusterId: 2,
clusterName: '上海直销通讯录',
clusterNum: 1254588,
clusterAmount: 49
}
]
:name="cluster.clusterId"
如上,给name赋值
<van-radio-group v-model="radio">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
export default {
data() {
return {
radio: '1'
}
}
};
是这样用的,只用给 van-radio-group 设置 v-model,并设置默认值
然后再给name赋值
给name绑定一下,v-bind一下,v-bind:name=“”
你循环错了 ,不是循环"van-radio-group", 是循环 "van-radio", 你这样循环相当于创建多个单选组 , 而不是一个单选组, 所以会出问题;
<van-radio-group v-model="radio">
<van-radio v-for="cluster in clusters" :key="cluster.clusterId" :name="cluster.clusterId">{{cluster.clusterName}}</van-radio>
</van-radio-group>