uni-app uni-data-checkbox组件，mode为list时单选按钮选不中

uni-app uni-data-checkbox组件，mode为list时单选按钮选不中

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 浏览器平台 浏览器版本 项目创建方式
uniapp/H5 Windows 10 正式 3.1.22 Chrome 90.0.4430.212 HBuilderX

操作步骤：

<uni-data-checkbox v-model="formData.value" :localdata="sex" ></uni-data-checkbox>
<uni-data-checkbox v-model="formData.value" :localdata="sex" mode="list"></uni-data-checkbox>

formData: {
value: 0
},
sex: [
{
text: ‘男’,
value: 0
}, {
text: ‘女’,
value: 1
}, {
text: ‘未知’,
value: 2
}
]


### 预期结果：


radio按钮在mode为list时也可以选中

实际结果：

radio按钮在mode为list时也可以选不中


### bug描述：


问题描述：uni-data-checkbox，mode为list时，单选按钮选不中  

代码清单：


<uni-data-checkbox v-model="formData.value" :localdata="sex" ></uni-data-checkbox>  
<uni-data-checkbox v-model="formData.value" :localdata="sex" mode="list"></uni-data-checkbox>  

formData: {  
    value: 0  
},  
sex: [  
    {  
        text: '男',  
        value: 0  
    }, {  
        text: '女',  
        value: 1  
    }, {  
        text: '未知',  
        value: 2  
    }  
]

截图如下：


更多关于uni-app uni-data-checkbox组件，mode为list时单选按钮选不中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

更新组件 0.2.4 版本 ，已经修复这个问题

更多关于uni-app uni-data-checkbox组件，mode为list时单选按钮选不中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


1.4.26 版本又复现bug了

回复 1***@qq.com: 在uni-data-checkbox组件中找到列表样式中.radio__inner-icon添加background-color: $uni-primary;即可

根据你提供的代码和截图，问题在于两个 uni-data-checkbox 组件绑定了同一个 v-model（formData.value），这会导致数据冲突。当 mode 为默认值（非 list）时，组件可能以复选框形式呈现，而 mode="list" 时则以单选列表形式呈现，但两者共享同一个 formData.value，在单选模式下可能无法正确响应选中状态。

解决方案如下：

  1. 为每个组件使用独立的 v-model 变量：避免数据绑定冲突。例如：
    <uni-data-checkbox v-model="formData.value1" :localdata="sex"></uni-data-checkbox>
<uni-data-checkbox v-model="formData.value2" :localdata="sex" mode="list"></uni-data-checkbox>
    对应 formData 初始化为：
    formData: {
    value1: 0,
    value2: 0
}
回到顶部