在ElementUi中，多选框Checkbox 在循环中选不上的大坑，用 this.$set来解决

已于 2022-11-03 18:23:33 修改
阅读量1.2k 收藏
点赞数
分类专栏： VUE 文章标签： elementui javascript 前端
于 2022-10-02 23:06:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18089765/article/details/127147558
版权

近遇见个奇怪的事情，elemengui的el-checkbox组件，在循环中选不上

 但是在data中定义的变量就能正常

后来高手帮助结局，

小子丶拽字咋写(469112796) 2022-10-02 20:05:07
直接赋值没有getter setter方法
小子丶拽字咋写(469112796) 2022-10-02 20:05:37
你用this.$set赋值就可以了

把this.form.item[index].goods_item_checked = []

改为：

this.$set(this.form.item[index],'goods_item_checked',[])

就解决了

这个问题应该也可以通过：vue中 $nextTick来解决

桃花岛主70
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery使用$.ajax和checkbox实现下次不在通知功能
10-24
主要介绍了JQuery使用$.ajax和checkbox实现下次不在通知功能,本文给出HTML代码、JS代码、和后端JAVA代码完整示例,需要的朋友可以参考下
JavaScript判断表单中多选框checkbox选中个数的方法
10-23
主要介绍了JavaScript判断表单中多选框checkbox选中个数的方法,涉及javascript针对checkbox复选框的遍历与判断技巧,具有一定参考借鉴价值,需要的朋友可以参考下
关于element+ui，多选框组无法选中问题
liuarmyliu的博客
05-31 8428
遇到一个问题，在使用element ui的多选框组件el-checkbox-group和el-checkbox的时候出现了无法选中选项的事情 <el-checkbox-group v-model="checkList" :min="less" :max="most"> <el-checkbox v-for="(item,index) in listDate.options" :key="index" :label="item">
el-checkbox在el-dialog里 不会被勾选的问题
Patrick_hyp的博客
01-13 2592
elmentui中checkbox遇到的问题
element 循环动态Checkbox 多选框
xiaoHelloWord的博客
06-04 4562
直接放图，这里做的是权限控制 <table width="100%"> <tbody> <tr v-for="(permissionTop,topIndex) in tableData" :key="topIndex"> <th style="line-height:48px;border:1px solid #1E9FFF;padding:0 10px;width: 150px;"> <el-checkbox :
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
qq3892997的博客
11-02 5791
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
解决elementUI中使用checkbox无法选中的问题
最新发布
简单点的博客
01-21 2448
解决elementUI中使用checkbox无法选中的问题
element组件点击复选框不选中问题
m0_49789433的博客
12-20 3563
element组件点击复选框不选中问题 问题复现 点击却选不中（代码如下） <el-checkbox-group v-model="Form" :max="max" :min="min"> <el-checkbox v-for="(choice,index3) in data.choices" :key="index3" ></el-checkbox> </el-checkbox-group> 问题解析：如果ma...
Vue + Element UI 循环生成checkbox无法选中
yujin0213的博客
03-07 9095
背景：需要根据后端返回的数据生成相对应数量的checkbox，并勾选需要更改状态的数据传递给后端，如下图 HTML部分： &amp;lt;el-checkbox v-model=&quot;item.checked&quot; :key=&quot;item.id&quot;&amp;gt;&amp;lt;/el-checkbox&amp;gt; 一开始的写法，就是获取到数据，遍历生成checked属性 getUserAuditList
element-ui - el-checkbox绑定失效
nunumaymax的博客
10-27 3994
原文地址：vue与element ui的el-checkbox的坑。
jquery.checkbox 单选框多选框美化插件
06-10
效果描述： 基于jQuery的一款插件，可以让你的input输入框 无论是单选还是多选，都实现的很漂亮 ... 使用方法： 1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 (注意保持文件路径正确)
elementUI多选框反选的实现代码
10-17
主要介绍了elementUI多选框反选的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
表单checkbox多选框选择特效
04-06
在网页设计中，表单是收集用户数据的重要手段，而多选框（checkbox）则是表单元素中不可或缺的一部分。在“表单checkbox多选框选择特效”中，我们主要探讨的是如何利用CSS3来增强多选框的视觉效果，使其在用户交互时...
element-ui之el-checkbox遇到的一些问题
huahuahua__的博客
12-08 2410
el-checkbox绑定了v-model却不能响应 <el-checkbox style="transform: translateY(50%);" v-model="option.isDefaults" :label="''" @click.prevent.native="setDefaultOption(index)" ></el-checkbo...
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
风中追风
09-23 6562
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！
Vue动态生成el-checkbox点击无法赋值的解决方法
qq_38196449的博客
05-29 1946
我们发现确实有了值，但为什么不勾选呢？当我再点击其余两个选项，发现数组里的元素没有按预计的增加，而是替换，当我点第一个蛋堡选项时，数组是["1"]，但当我点第二个选项肉夹馍时，数组不是预想的["1","2"]，而是["2"]，这又是什么原因呢？Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)我的项目是动态创建表单项，里面有文本框、单选、多选框、以及时间控件等....。不管我怎么点击，都无法选中，我们再看看这时this.temp的值。
elementui[在vue使用v-for循环渲染el-checkbox-group和el-checkbox组合时，渲染不出label为0的情况
Harley567
02-13 1327
elementui[在vue使用v-for循环渲染el-checkbox-group和el-checkbox组合时，渲染不出label为0的情况
el-checkbox-group 使用遇到的坑
qq_41957192的博客
11-24 3388
想实现的功能 el-checkbox-group 多选、表单验证必选 <!-- 报错代码 --> <el-dialog title="配置详情" width="395px" center > <el-form :model="configInfo" id="form" ref="form" :rules="rules" size="small" label-position="right" label-width="120px" &gt.
vue-router报错的解决方法vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated:
桃花岛主的博客
05-20 8843
在main.js中加入以下代码 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
用this.$set清除上一次ant design 复选框回显的值
06-03
可以通过以下步骤使用`this.$set`清除上一次Ant Design复选框回显的值： 1. 在Vue组件中定义一个data属性来存储复选框的值，例如： ``` data() { return { checkedList: [] } } ``` 2. 在Ant Design复选框组件中，使用v-model指令将复选框的值绑定到data属性上： ``` <CheckboxGroup v-model="checkedList"> <Checkbox value="A">A</Checkbox> <Checkbox value="B">B</Checkbox> <Checkbox value="C">C</Checkbox> </CheckboxGroup> ``` 3. 在需要清除值的地方，使用this.$set将data属性设置为空数组，例如： ``` this.$set(this, 'checkedList', []); ``` 这将清除之前选择的所有复选框的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

桃花岛主70

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

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

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

打赏作者

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

抵扣说明：

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

余额充值