el-checked value值发生了改变，选中状态未改变

最新推荐文章于 2025-02-13 15:15:15 发布
最新推荐文章于 2025-02-13 15:15:15 发布
阅读量909 收藏 2
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51721168/article/details/134439665
版权
文章讨论了在Vue项目中遇到的问题，即value值改变但el-checked状态不更新。原因是未触发set方法导致get值不变，DOM未重绘。解决办法是在适当的方法中调用this.$forceUpdate()强制组件重新渲染。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天在项目中发现了这个问题，打印的value值命名为 true，但是el-checked的状态却并没有改变，百度的结果是，虽然 value 的值已经改变了，但是并没有触发 set 方法，所以get 中值并没有改变，所以并不会重新渲染dom。

解决方法：使用 this.$forceUpdate()  强制该组件重新渲染。

使用的时候，直接在方法中调用这个  this.$forceUpdate() 即可

if侠
关注
el-checkbox实现月份选择变化，checked动态调整显示状态,动态改变多选框的选项问题，并且拿到选项值
qq_41180882的博客
10-27 2173
在table表格中，再次进行月份遍历，下方有月份的table数组，由于月份后端返回代码，所以前端做了调整 ， @change这里的内容是当选择变化是触发函数，分别内容是，触发的内容，触发的本表格的遍历的月份，索引和对应的本行内容。方法：前端通过拿到的数据，寻找到本条数据的父级元素，再利用父级元素内的内容，来改变本行内容的数据 ，这里的obj就是选项找到的内容。在data中固定的数据，与后端做对应。
Vue3+element-plus的el-cascader级联选择器组件实现多级选择、级联选择、表单多级单选、表单多级多选，el-cascader获取value值
github同名`runopiboss`的博客
08-06 2405
Vue3+element-plus的el-cascader级联选择器组件实现多级选择、级联选择、表单多级单选、表单多级多选，el-cascader获取value值
el-checkbox动态渲染选中切换时没有效果
weixin_43995405的博客
09-15 2095
先贴代码： 做checkbox动态渲染之后选中，然后切换只显示选中的数据时，再遍历，之前没有选中checkbox的，现在值为true，checkbox竟然没有勾选上， 是因为checked只在初次渲染时有效果，动态变化时无效，把checked换成value就可以再次动态切换选中效果 ...
el-checkbox状态值修改而样式不修改的原因
qq_51741730的博客
09-14 3183
el-checkbox状态值修改而样式不修改的原因
ElementUI表格表头自定义添加checkbox，点击选中样式不生效
最新发布
ew45218的博客
02-13 426
场景：需要自定义table的多选效果，不用其自带的，采用官方文档此处（如图）的处理过程，并把全选控件嵌入table的表头，el-checkbox在table表头勾选样式不生效。具体用法，点击全选，样式没有变化。
vue + element-ui项目，el-checkbox上的响应式问题——数据变化后勾选状态未变化
Annie的博客
07-15 8555
Vue 为了尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。若要两个元素完全独立，不要复用，添加具有唯一值的key即可。
el-checkbox 无法动态设置勾选状态
weixin_52268321的博客
05-07 1126
cheked 值动态变化，但是el-checkbox勾选状态无法动态改变
el-checkbox 状态不更新
bao
08-13 930
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
element ui checkbox（多选框）v-model 变量 赋值后再次改变不会刷新视图问题
qq_44029421的博客
10-23 1554
Vue 不允许动态添加根级别的响应式 property。但是，可以使用 深度响应式。结果给v-model绑定的变量赋值后多选框的数据改变，但是视图效果没有更新。场景： 编辑内容有需要给多选框绑定数组——该数据需要从后台获取。
vue .js绑定checkbox并获取、改变选中状态的实例
10-18
对于复选框选中值的处理，我们可以利用`v-bind:true-value`和`v-bind:false-value`指令自定义选中和未选中的值，使数据更符合业务需求。通过这种方式，我们可以简化代码，提高开发效率，同时保持数据的准确性和一致...
Vue动态生成el-checkbox点击无法赋值的解决方法
12-03
问题在于，当用户点击动态生成的复选框时，预期是选中或取消选中对应的值，但实际上可能发生了全选或全不选的情况。这通常是由于v-model绑定的数据类型不正确导致的。在Vue中，复选框通常期望绑定的数据是一个数组，...
【前端疑难杂症bug——el-cascader手动设置值、页面不回显bug】
m0_74824661的博客
12-19 1401
使用el-cascader级联选择器，选择器之外有快速选择的功能。
element el-checkbox已绑定值却无法勾选的问题
qq_37471721的博客
08-08 2万+
问题描述 首先根据后端返回的数据列表展示出checkbox组 页面展示如下 选中“设计师” 选项保存。再点击修改时，后端返回的值为[16]，但是却无法勾选中设计师这个选项，几经周折发现el-checkbox的value需要为string才有效 解决办法 ...
vue2 el checkbox选中数据变化视图无更新
m0_47564725的博客
09-06 1627
给checkbox随便绑定个数据,当你点击的时候适用el的change事件触发去改变他,让vue监听到数据变化从而更新vnode;效果如下,可以看到成功更新视图;如上图我在勾选后发现视图并没有更新,控制台输出发现数据是变化了的;首先我想到的是丢失响应式,采用了set方法发现并没有啥用...
Element-Ui 复选框动态改变绑定值，复选框未勾选问题
clearjj的博客
06-09 3179
最近在写项目时遇到复选框数据更改但是界面未被选中的问题，通过打印结果可以看到v-model数据已经更改但是界面并未更改状态，通过查询得知，虽然数据变了，但并没有触发model的set方法，所以当首次将selfModel设置为true后，后面get方法得到的值一直是true。产生这个问题的原因是，Vue 为了尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。 这里推荐一个内置方法 this.$forceUpdate() 使用的话就直接用就行 //html <el-checkbox @
el-table中data发生变化原checkbox选中项保留的问题
蜗牛快爬
12-28 788
最近项目中遇到了在一个列表中通过checkbox多选行问题，由于列表数据比较多，会遇到多选对象不好找，因此想通过查询条件筛选出再进行选择，这样就会导致每次查询table的data值都会发生变化，所以需要保证每次查询并且选择完行以后记录前一次的选择的行对象，这样再最终选择完记录以后才会将所有的行对象拿到，问题点就是每次记录上次的查询的选中对象，同事取消选中以后也要再整个选中的对象中取消对应行对象。最后结果，所有以前选择的行对象都在，取消不在截图了，一样道理。
el-checkbox 实现展示区分 label 和 value（展示值与选中获取值需不同）
jiangjunyuan168的博客
01-24 3431
elementplus 的 el-checkbox 官方代码中的多选框组实例如下：上方代码中选中哪个选项就会往 checkList 数组中加入选项的 label 值，如果需要实现展示的值与选中的值不一样要怎么实现呢？
el-checkbox如何同时获得value值和label的值
热门推荐
ThisEqualThis的博客
05-04 2万+
在使用el-checkbox时有时候需要往后台传送value值（定义的code）和label值，el-checkbox组件默认获取的都是label属性中的值，如果label中设置的是code，那如何获取el-checkbox的显示文字（label）呢？ 我们可以将value与label拼接在一起赋值给checkbox的label属性，然后获取的时候进行处理。 以el-checkbox-group为...
【vue element-ui 】el-table中使用checkbox视图更新滞后
SingDanceRapBall的博客
06-27 3536
本来想通过列表中每个对象的某个属性绑定到checkbox的状态，但是发现有个问题：就是点击复选框后，数据确实改变了，但是视图没有改变，当点击其他row的时候，才会更新之前的数图。如下图，第1次勾选第一行没反应，再点击其他行才会更新视图。
el-cascader勾选状态如何js添加is-checked
12-15
在Element UI的Cascader组件中，如果你想通过JavaScript动态控制每个节点的`is-check`状态（即是否被选中），你可以直接访问Cascader组件实例提供的`props`中的选项属性来设置。例如，假设你有一个名为`cascaderRef`的引用，可以这样做： ```javascript // 获取到Cascader组件实例 const cascaderInstance = cascaderRef.current; // 定义一个数组来表示新的选中状态 const newCheckedState = [true, false, true]; // 示例状态 // 遍历新选中状态数组并更新相应节点的状态 newCheckedState.forEach((isChecked, index) => { const node = cascaderInstance.options.children[index]; node.isCheck = isChecked; // 设置当前节点的is-check属性 }); // 可能需要手动触发视图更新 cascaderInstance.$emit('input', cascaderInstance.value); // 如果有值变更，同步回组件 ``` 这里`is-check`是Element UI早期版本对`checked`的命名，建议使用官方文档推荐的`checked`属性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值