el-checkbox复选框,单次点击选中框,取消失败

文章描述了一个项目中关于页面初次渲染时复选框回显的问题。问题在于回显的数据包含重复值,导致单次点击无法正确取消选中状态,需要多次点击才能生效。解决方法是通过对回显数据执行去重操作,从而确保单次点击能准确地取消或选中复选框。

项目场景:

页面初次渲染,回显复选框,并且可取消/选中。


问题描述

单次点击回显选中的复选框,取消选中失败,多次点击后取消选中状态成功。


原因分析:

回显数据值存在重复,导致单次点击无法取消。


解决方案:

对回显数据进行去重操作。

### el-checkbox复选框双向绑定 在Vue中,`el-checkbox` 可通过 `v-model` 指令实现双向绑定。`v-model` 能将复选框选中状态与数据属性关联起来,数据属性值的变化会反映在复选框选中状态上,反之亦然。 示例代码如下: ```vue <template> <div> <el-checkbox v-model="solicitation.codAmount" true-label="1" false-label="0">有货款</el-checkbox> <p>当前选中状态: {{ solicitation.codAmount }}</p> </div> </template> <script> export default { data() { return { solicitation: { codAmount: '0' } }; } }; </script> ``` 在上述代码中,`v-model` 绑定了 `solicitation.codAmount`,当复选框状态改变时,`solicitation.codAmount` 的值会相应改变;反之,`solicitation.codAmount` 值改变时,复选框状态也会更新。 ### el-checkbox复选框回显 回显通常指在页面加载时,根据已有数据设置复选框选中状态。结合双向绑定,只需在数据初始化时设置好对应的值,复选框就能正确显示选中状态。 示例代码如下: ```vue <template> <div> <el-checkbox v-model="isChecked">是否选中</el-checkbox> </div> </template> <script> export default { data() { return { // 假设从后端获取到的数据 isChecked: true }; } }; </script> ``` 在上述代码中,`isChecked` 初始值为 `true`,页面加载时,复选框会自动处于选中状态。 ### 一组 el-checkbox 回显与双向绑定 对于一组 `el-checkbox`,可使用数组来实现双向绑定和回显。 示例代码如下: ```vue <template> <div> <el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{ city }}</el-checkbox> </el-checkbox-group> <p>当前选中的城市: {{ checkedCities }}</p> </div> </template> <script> export default { data() { return { cityOptions: ['北京', '上海', '广州', '深圳'], // 假设从后端获取到的已选中城市 checkedCities: ['北京', '上海'] }; } }; </script> ``` 在上述代码中,`el-checkbox-group` 通过 `v-model` 绑定 `checkedCities` 数组,页面加载时,`checkedCities` 中的城市对应的复选框会自动选中;当用户操作复选框时,`checkedCities` 数组会相应更新。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈善强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值