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

最新推荐文章于 2024-05-07 10:03:21 发布

小小菜菜程序员

最新推荐文章于 2024-05-07 10:03:21 发布

阅读量796

点赞数 4

分类专栏： vue 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_42900469/article/details/127486797

版权

vue 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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

使用 this.$forceUpdate()，无效
使用 this.$set() ，无效
给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
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小菜菜程序员

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
checkbox 动态修改属性但是不渲染的问题

checkbox 重新渲染
复制链接

扫一扫

专栏目录

el-checkbox-group多选框编辑时渲染显示，修改选择无效问题；

onlylele的博客

03-30

2463

1、问题描述：使用elementui 中的多选框组件，编辑表单内容时可以正常显示，但是改变时一个选择无效，显示状态没有修改成功问题；如下图所示： 2、使用说明：仅部分主要代码，markList 为被选项列表。 // 修改客户标签改变 , i handleRoleCheckedChange(m) { this.markList.forEach((itds, i) => { if (itds.wholesaler_mark_id === m.wholesal

浅析jquery与checkbox的checked属性的问题

11-23

而后者不仅改变属性，还会更新页面呈现，确保所见即所得。总之，理解 jQuery 和原生 JavaScript 在处理 `checked` 属性时的区别至关重要。在处理复选框状态时，优先考虑使用 `.prop()` 方法，因为它会更准确地反映...

3 条评论您还未登录，请先登录后发表或查看评论

在使用el-checkbox复选框编辑、回显时碰到的坑

dawang18232123的博客

02-24

2047

根据后端要求，需要传递id过去，即‘1,2,3’这种的格式，但是el-checkbox复选框打印出来的结果是[‘美食’，‘玩具’，‘家具’]这种数组样式的，所以需要用label绑定的是id值。此时选择复选框的时候change打印出来的是符合要求的，但是在回显编辑的时候，再次选择其他复选框的时候，无法进行勾选。其中e为true，意思是选中了当前的选项，item是传递过来的id及其name值，这样同样也解决了编辑回显时再次选择的问题。这样就解决了，编辑回显时再次选择的问题。选中则放进数组，取消选中则删除它。

el-checkbox 无法动态设置勾选状态

最新发布

weixin_52268321的博客

05-07

662

cheked 值动态变化，但是el-checkbox勾选状态无法动态改变

checkbox点击后未渲染解决方案

03-12

2609

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

3812

在项目中会遇到多选回填操作 <el-checkbox v-model="item.isChecked" > {{item.MEASURE}} </el-checkbox> 经常会和数据中的一个属性绑定，常见为ischecked属性在后端返回数据时没有带有isChecked属性就要前端forEach循环添加这时会遇到添加属性后复选框勾选渲染不及时变化但数据里的isChecked属性值在变化的问题且使用this.$forceUpdate();和$set()无效.

动态渲染子组件中的 checkbox 不成功

qq_51622532的博客

03-24

790

动态渲染子组件中的 checkbox 不成功

element table中加入input、checkbox 数据无法正常渲染问题

u011028557的博客

08-01

681

element table中加入input、checkbox 数据无法正常渲染问题

ElementUI checkbox渲染不出来

qq_33225414的博客

01-19

681

1、控制台报错router.js:1634 TypeError: Cannot read properties of null (reading 'length') 2、页面数据没渲染出来 3、原因v-model绑定的对象（后端返回）为null值

解决vue数组中对象属性变化页面不渲染问题

01-19

做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。换了关键词搜索找到了相关方法。其实之前读文档教程的时候看到过这里，但是只有真的使用...

Vue动态生成el-checkbox点击无法赋值的解决方法

12-03

尽管这样做了，问题仍然存在，因为Vue不支持在实例创建后动态添加根级响应式属性。要解决这个问题，我们需要借助Vue的`Vue.set`方法，它允许在嵌套对象上添加响应式属性。修改初始化代码为： ```javascript this....

Vue-input框checkbox强制刷新问题

10-17

另外，如果你想防止checkbox被用户修改，可以添加`readonly="readonly"`属性。不过，对于checkbox而言，更常见的是使用`disabled="disabled"`属性来禁用它： ```html <input type="checkbox" v-model="value" value...

vue .js绑定checkbox并获取、改变选中状态的实例

10-18

在Vue.js中，绑定checkbox并获取、改变其选中状态是常见的需求。本文将通过一个实例来详细介绍这个过程，并探讨如何处理复选框选中的值问题。首先，让我们看下HTML部分的代码： ```html ...

JqueryMobile Checkbox在页面上没有及时渲染的问题

MinSnake816的专栏

03-29

903

在通过js对checkbox的值进行改变的时候我们发现页面上并没有任何改变，这是因为jquerymobile在我们手动改变它的值之后不能重新的渲染，这样页面显示的值就和实际的值不一样的。接下来我们以JqueryMobile中的全选功能作为例子来讲解： html的页面在这里就不多写了首先我们把全选的checkbox的id定为allCheck 把其他的checkbox的name定为chec

iview checkbox 编辑内容时，没有将单条数据渲染过来

11-29

411

1.需求描述点击“编辑”将列表中的单条数据渲染在编辑弹窗中 2.使用场景编辑“用户管理” 3.问题描述编辑内容时，没有将单条数据渲染过来 4.解决思路因为编辑页是做了表达校验的,在ruleValidate对象中，数组时必须要声明 type:'array'，否则校验不通过，且一定要注意双向绑定的数据类型跟后台返回的数组里面字段的数据类型是否一致，如果不一致，是不可能渲染得...

checkbox的change()方法没有效果/bootstrap-switch渲染后click()、change()方式失效

小道仙的后宫

05-27

2216

今天用bootstrap-switch插件渲染了一下checkbox，渲染效果如下：渲染之后无论我给它添加什么事件（change()、click()...），事件都没有效果。百度了一下发现原来渲染之后不能使用之前的方法，那些方法被插件作者重新包装了一下，现在使用如下： $('.checkbox_'+ n).on('switchChange.bootstrapSwitch', fun...

checkbox v-model = true 但没选中

houdabiao的博客

03-17

1067

最近做了一个穿梭框的功能，左边的数据可以添加到右面，右面的数据可以添加到左面出现点击左面的数据单个添加到右面的时候，选中的元素的下一下checkbox的选中效果受选中元素的影响，即使已经移到右面（当然v-model对应值已经动态改变） 1. (1)通过添加checkbox change事件 (2).e.target.checked = true(右面相反设置为false) ...

layui，checkbok、select、radio，无法渲染的问题解决

小道仙的后宫

05-01

8714

当我们复制了layui上的代码，并且引用了layui.css，和layui.all.js。但是相对应的效果还是无法显示的时候。请看你的js代码是否放在了最后。 js代码如下： <script> //Demo layui.use('form', function(){ var form = layui.form; //从文档上复制的好像...

el-checkbox动态渲染选中切换时没有效果

weixin_43995405的博客

09-15

1914

先贴代码：做checkbox动态渲染之后选中，然后切换只显示选中的数据时，再遍历，之前没有选中checkbox的，现在值为true，checkbox竟然没有勾选上，是因为checked只在初次渲染时有效果，动态变化时无效，把checked换成value就可以再次动态切换选中效果 ...

uniapp 怎么修改checkbox 为实心圆

03-31

可以在 uni-app 中使用以下方式来修改 checkbox 为实心圆： 1. 在样式表中添加以下样式： ```css /* 设置 checkbox 为实心圆 */ input[type="checkbox"] { -webkit-appearance: none; appearance: none; border-radius: 50%; border: 1px solid #ccc; width: 16px; height: 16px; background-color: #fff; outline: none; } /* 设置 checkbox 选中状态下为实心圆 */ input[type="checkbox"]:checked { background-color: #000; } ``` 2. 在模板中使用以下代码来渲染 checkbox： ```html <input type="checkbox" v-model="isChecked" /> ``` 其中，v-model 绑定了 isChecked 变量，可以用来判断 checkbox 是否被选中。 3. 通过修改样式表中的颜色值来改变实心圆的颜色。注意：在某些浏览器中，-webkit-appearance 属性可能不起作用，需要使用 -moz-appearance 属性。同时，不同的浏览器可能会对样式表的解析产生差异，因此需要进行兼容性测试。