checkbox 动态修改属性但是不渲染的问题

最新推荐文章于 2023-07-07 23:32:53 发布
最新推荐文章于 2023-07-07 23:32:53 发布
阅读量911 收藏 1
点赞数 4
分类专栏： vue 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42900469/article/details/127486797
版权
本文探讨了如何解决Vue中动态修改el-checkbox的key属性导致的渲染问题，发现通过直接修改key值可以有效触发组件更新。详细介绍了使用$forceUpdate和$set方法失效的情况，以及关键在于数据变化时正确操作key属性。
摘要由CSDN通过智能技术生成

checkbox 动态修改属性但是不渲染的问题

  1. 使用 this.$forceUpdate()，无效
  2. 使用 this.$set() ，无效
  3. 给checkbox添加一个key，然后动态修改key值，有效

添加一个 :key = “checkbox”，在数据变动的时候，修改key值

<el-checkbox :key="checkbox"
                    :disabled="item.modelMustHave == 1 ? true : false"
                    @change="(checked) => checkRequired(checked, item)"
                    :checked="item.required == 1"
                    :data-a="item.required"
                    >必填</el-checkbox>

 // 数据有更新
    handleUp() {
      this.checkbox = !this.checkbox
    },
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
前言 最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如： 定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList，这个就是动态生成的表单数据 v-for 循环 checkList，得到 key，然后直接 v-model=“form.key” 动态生成 form 里面的 key <el-
解决 Vue 动态生成 el-checkbox 点击无法赋值问题
蜗牛
12-15 2073
最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如： 定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList，这个就是动态生成的表单数据 v-for 循环 checkList，..
checkbox点击后未渲染解决方案
03-12 2715
elementui 中 checkbox点击未渲染的问题 在elementui中，使用checkbox做点选时 点击后参数已修改但是未渲染样式，还是点击前状态 可以使用下方的方法强制刷新，完成checkbox多选框的重新渲染。 this.$forceUpdate(); 示例 <el-checkbox border v-model="item.ischecked" @change="handleCheckedChange(item)"> {{item.remark}}
element ui中复选框el-checkbox勾选不及时渲染问题
qq_54580397的博客
10-13 4024
在项目中会遇到多选回填操作 <el-checkbox v-model="item.isChecked" > {{item.MEASURE}} </el-checkbox> 经常会和数据中的一个属性绑定，常见为ischecked属性 在后端返回数据时 没有带有isChecked属性 就要前端forEach循环添加 这时会遇到添加属性后 复选框勾选渲染不及时变化 但数据里的isChecked属性值在变化的问题 且使用this.$forceUpdate();和$set()无效.
el-checkbox-group多选框编辑时渲染显示，修改选择无效问题；
onlylele的博客
03-30 2634
1、问题描述：使用elementui 中的多选框组件，编辑表单内容时可以正常显示，但是改变时一个选择无效，显示状态没有修改成功问题；如下图所示： 2、使用说明：仅部分主要代码，markList 为被选项列表。 // 修改客户标签改变 , i handleRoleCheckedChange(m) { this.markList.forEach((itds, i) => { if (itds.wholesaler_mark_id === m.wholesal
动态渲染子组件中的 checkbox 不成功
qq_51622532的博客
03-24 907
动态渲染子组件中的 checkbox 不成功
浅析jquery与checkbox的checked属性的问题
11-23
而后者不仅改变属性，还会更新页面呈现，确保所见即所得。 总之，理解 jQuery 和原生 JavaScript 在处理 `checked` 属性时的区别至关重要。在处理复选框状态时，优先考虑使用 `.prop()` 方法，因为它会更准确地反映...
解决vue数组中对象属性变化页面不渲染问题
01-19
做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。 换了关键词搜索找到了相关方法。 其实之前读文档教程的时候看到过这里，但是只有真的使用...
使CheckBoxList的Attributes属性生效（修改微软的一个bug）
10-30
### 使CheckBoxList的Attributes属性生效（修改微软的一个bug） #### 概述 在ASP.NET Web Forms中，`CheckBoxList` 控件是一个非常实用的功能组件，它可以用来展示一系列的复选框供用户选择。尽管 `CheckBoxList` ...
element table中加入input、checkbox 数据无法正常渲染问题
u011028557的博客
08-01 732
element table中加入input、checkbox 数据无法正常渲染问题
对于复选框总是无法渲染上的问题
qq_44866462的博客
04-23 831
对于复选框总是无法渲染上的问题，原因是后端返回的数据res 以前处理方法 this.list=res.data; for(var i=0;i<this.list.length;i++){ this.list[i].isActive=false; } 这样总是无法渲染，后来改为 for(var i=0;i<res.data.length;i++){ res.d...
关于 vue2中 el-checkbox-group 动态更新选项 视图不更新的问题
Hash9909的博客
06-21 1799
里面有很详细的解释说为什么会发生这样的问题(还是大佬厉害 得多学习) 确实可以这样做 但同样是不推荐 然而个人能力有限 并不能实现如他所示的效果 如果有同志有更好的方法 欢迎指正评论！最近在 el-dialog 中使用 el-checkbox-group 选项值为对象的时候 动态渲染选数据 视图不更新这个问题已经给折磨透了。反复的排查之后确认了确实是数据有更新 仅仅只是 视图没有发生变化 觉得应该可以通过 “v-if” 来暴力解决问题（不推荐）但都没有实际的解决 遇到的问题。
el-checkbox / el-checkbox-group中绑定对象无法回显的问题处理
07-07 2536
同时该操作也可同用于el-checkbox-group如有疑问，欢迎讨论......_el-checkbox绑定对象。在使用el-checkbox / el-checkbox-group时，发现若label绑定的是对象，则是无法回显的，参考了很多方法，但大多都无法解决，最终参考下面的方法解决，记录一下。参考：el-checkbox绑定Object/Array解决方法（同附el-checkbox-group解决方法）_el-checkbox绑定对象_奈登里的博客-CSDN博客。
el-checkbox动态渲染选中切换时没有效果
weixin_43995405的博客
09-15 2030
先贴代码： 做checkbox动态渲染之后选中，然后切换只显示选中的数据时，再遍历，之前没有选中checkbox的，现在值为true，checkbox竟然没有勾选上， 是因为checked只在初次渲染时有效果，动态变化时无效，把checked换成value就可以再次动态切换选中效果 ...
el-checkbox遇到的渲染和勾选的问题
qq_41838435的博客
12-07 2919
el-checkbox遇到的渲染和勾选的问题 使用场景 要求：多个el-checkout，可多选，但最多选6个，再次勾选会失败并提醒最多勾选六个。 场景：已勾选6个，再去勾选第七个时，勾选失败、弹出提醒，此时取消一个已勾选，再次勾选第七个，需点击两次才能选中 解决方法：在change后面添加native <div v-for="item in dataList" :key="item.id"> <span>已选中{{ item.order }}个</span>
layui，checkbok、select、radio，无法渲染的问题解决
小道仙的后宫
05-01 8762
当我们复制了layui上的代码，并且引用了layui.css，和layui.all.js。但是相对应的效果还是无法显示的时候。 请看你的js代码是否放在了最后。 js代码如下： <script> //Demo layui.use('form', function(){ var form = layui.form; //从文档上复制的好像...
解决element ui级联选择器更新值后dom不更新渲染不回显
qq_43725946的博客
11-30 2867
一、解决在表单的提交中，或者加载一个窗口需要初始化值的时候，点击事件中，明明为级联选择器赋值了，但是没用，dom没有渲染。 二、解决。 <el-cascader style="margin-left: 20px;" disabled placeholder="原始村镇" v-model="originalValue" :key="originalKey" // 重点 :props="props"&gt
iview checkbox 编辑内容时，没有将单条数据渲染过来
11-29 434
1.需求描述 点击“编辑”将列表中的单条数据渲染在编辑弹窗中 2.使用场景 编辑“用户管理” 3.问题描述 编辑内容时，没有将单条数据渲染过来 4.解决思路 因为编辑页是做了表达校验的,在ruleValidate对象中，数组时必须要声明 type:'array'，否则校验不通过，且一定要注意双向绑定的数据类型跟后台返回的数组里面字段的数据类型是否一致，如果不一致，是不可能渲染得...
vue2 element-ui el-checkbox 视图不更新问题
weixin_45143856的博客
08-16 7896
响应式数据更新，视图不发生变化 vue2 el-element ui el-checkbox 复杂数据类型
el-table checkbox 动态显示
最新发布
07-06
el-table 的 checkbox 动态显示通常是指在 Vue.js 中使用 Element UI 的表格组件时，想要根据数据状态动态地控制表格行的选中状态。这可以通过数据绑定和条件渲染来实现。 例如，在你的 data() 函数里，你可以有一个数组，每个对象都有一个 `selected` 属性表示是否被选中： ```javascript data() { return { tableData: [ { id: 1, name: 'Item 1', selected: false }, { id: 2, name: 'Item 2', selected: true }, // 更多数据... ] } } ``` 然后在模板（template）部分，你可以使用 v-if 或者 v-model 绑定这个 `selected` 属性： ```html <el-table :data="tableData"> <el-table-column type="selection" width="55"></el-table-column> <!-- 其他列... --> <el-table-column label="操作"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.selected">选择</el-checkbox> </template> </el-table-column> </el-table> <!-- 当你需要动态切换选中状态时 --> <button @click="toggleSelection(id)">切换选中</button> <script setup> const toggleSelection = (id) => { this.tableData.find(item => item.id === id).selected = !item.selected; } </script> ``` 在这个例子中，点击 "切换选中" 按钮会通过 `toggleSelection` 方法更新对应 id 行的 `selected` 属性，从而动态改变 checkbox 的状态。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小小菜菜程序员

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

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

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

打赏作者

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

抵扣说明：

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

余额充值