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

最新推荐文章于 2024-01-19 16:53:27 发布
最新推荐文章于 2024-01-19 16:53:27 发布
阅读量751 收藏
点赞数
分类专栏： 实践 文章标签： vue.js 前端 javascript ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51622532/article/details/123708262
版权

vue3 + ts + element-plus checkbox 不动态渲染（setup中使用）

使用

其实使用都是一样的，只是我自己单独封装了一层

下面是封装的组件
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
父组件使用
在这里插入图片描述
在这里插入图片描述

最开始 没有在 computed 中 return 出去这个初始数据，所以不生效。

原因

因为请求是异步的，最开始的时候有一个初始值，为 空数组 [ ]，所以在这个时候就把数据传给 子组件了，然后 后面拿到请求数据之后，父组件的数据变了，但是子组件的数据没有变， 所以就 用computed 来监听这个初始值的数据，传递也是传 computed 监听 的这个变量

小辣机呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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-
checkbox 动态修改属性但是不渲染的问题
qq_42900469的博客
10-24 739
checkbox 重新渲染
checkbox点击后未渲染解决方案
03-12 2523
elementui 中 checkbox点击未渲染的问题 在elementui中，使用checkbox做点选时 点击后参数已修改但是未渲染样式，还是点击前状态 可以使用下方的方法强制刷新，完成checkbox多选框的重新渲染。 this.$forceUpdate(); 示例 <el-checkbox border v-model="item.ischecked" @change="handleCheckedChange(item)"> {{item.remark}}
elementui[在vue使用v-for循环渲染el-checkbox-group和el-checkbox组合时，渲染不出label为0的情况
Harley567
02-13 1237
elementui[在vue使用v-for循环渲染el-checkbox-group和el-checkbox组合时，渲染不出label为0的情况
element ui中复选框el-checkbox勾选不及时渲染问题
qq_54580397的博客
10-13 3631
在项目中会遇到多选回填操作 <el-checkbox v-model="item.isChecked" > {{item.MEASURE}} </el-checkbox> 经常会和数据中的一个属性绑定，常见为ischecked属性 在后端返回数据时 没有带有isChecked属性 就要前端forEach循环添加 这时会遇到添加属性后 复选框勾选渲染不及时变化 但数据里的isChecked属性值在变化的问题 且使用this.$forceUpdate();和$set()无效.
巧妙运用v-model实现父子组件传值的方法示例
12-11
v-model介绍 熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新数据。 以下摘取自Vue官方文档 ...通常子组件某个变
react-native-hybrid-storybook：在浏览器中展示您的React本机组件
02-03
相同CheckBox组件故事的示例react-native-elements网络和本机渲染。 哲学 一组用于创建基于项目的组件库的工具。 基于示例的自动生成的文档。 可扩展的建立在之上应该可以轻松调整项目的默认规则，避免锁定。 ...
react-powerplug：无渲染容器
02-03
React PowerPlug是一组可插入的不可渲染组件和帮助器，提供了可用于哑组件的不同类型的状态和逻辑实用程序。 它创建状态并将逻辑向下传递给子级，因此您可以处理数据。 了解有关“模式的信息。强调 :OK_hand: 无依赖...
CFUpdate批量上传组件for ASP v1.1.8
10-18
CFUpdate批量上传组件选择多个文件上传，显示上传速度，进度条，纯正的FLASH代码，使用的是HTTP协议，所以客户端，服务端都不需要安装任何组件因为是模仿FORM表单提交，所以支持所有的网页动态语言：ASP ...
关于 vue2中 el-checkbox-group 动态更新选项 视图不更新的问题
Hash9909的博客
06-21 1416
里面有很详细的解释说为什么会发生这样的问题(还是大佬厉害 得多学习) 确实可以这样做 但同样是不推荐 然而个人能力有限 并不能实现如他所示的效果 如果有同志有更好的方法 欢迎指正评论！最近在 el-dialog 中使用 el-checkbox-group 选项值为对象的时候 动态渲染选数据 视图不更新这个问题已经给折磨透了。反复的排查之后确认了确实是数据有更新 仅仅只是 视图没有发生变化 觉得应该可以通过 “v-if” 来暴力解决问题（不推荐）但都没有实际的解决 遇到的问题。
ElementUI checkbox渲染不出来
最新发布
qq_33225414的博客
01-19 542
1、控制台报错router.js:1634 TypeError: Cannot read properties of null (reading 'length') 2、页面数据没渲染出来 3、原因v-model绑定的对象（后端返回）为null值
el-checkbox / el-checkbox-group中绑定对象无法回显的问题处理
07-07 1968
同时该操作也可同用于el-checkbox-group如有疑问，欢迎讨论......_el-checkbox绑定对象。在使用el-checkbox / el-checkbox-group时，发现若label绑定的是对象，则是无法回显的，参考了很多方法，但大多都无法解决，最终参考下面的方法解决，记录一下。参考：el-checkbox绑定Object/Array解决方法（同附el-checkbox-group解决方法）_el-checkbox绑定对象_奈登里的博客-CSDN博客。
el-checkbox遇到的渲染和勾选的问题
qq_41838435的博客
12-07 2674
el-checkbox遇到的渲染和勾选的问题 使用场景 要求：多个el-checkout，可多选，但最多选6个，再次勾选会失败并提醒最多勾选六个。 场景：已勾选6个，再去勾选第七个时，勾选失败、弹出提醒，此时取消一个已勾选，再次勾选第七个，需点击两次才能选中 解决方法：在change后面添加native <div v-for="item in dataList" :key="item.id"> <span>已选中{{ item.order }}个</span>
element-ui的el-checkbox-group回显失败，尝试多种办法，最终解决
weixin_46190955的博客
05-28 6445
最近几天适用vue-cli3.x结合element-ui做后台管理发现编辑时el-checkbox-group回显不了，并且要点击两次才能选择，在网上搜索，没有见到什么解决办法，就自己在哪里瞎琢磨，最后发现问题就是在提交和返回的数据这里 我跟后台约定提交什么，还返回什么，可是实际返回的数据却无法渲染，最后使用遍历的方式从多选框的数据源取出了对应的数据，然后用这些数据渲染就可以正常显示了 我提交的格式是[{id:1,name:‘一口价’},{id:2,name:‘拍卖’}],就是选择了什么就提交什么，并不是取
el-table checkbox （解决label值相同同时变化、checkbox状态无法动态更新)
song766426的博客
08-09 3056
解决checkbox label值相同、视图无法更新问题
对于复选框总是无法渲染上的问题
qq_44866462的博客
04-23 697
对于复选框总是无法渲染上的问题，原因是后端返回的数据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...
el-checkbox动态渲染选中切换时没有效果
weixin_43995405的博客
09-15 1848
先贴代码： 做checkbox动态渲染之后选中，然后切换只显示选中的数据时，再遍历，之前没有选中checkbox的，现在值为true，checkbox竟然没有勾选上， 是因为checked只在初次渲染时有效果，动态变化时无效，把checked换成value就可以再次动态切换选中效果 ...
el-checkbox-group多选框编辑时渲染显示，修改选择无效问题；
onlylele的博客
03-30 2345
1、问题描述：使用elementui 中的多选框组件，编辑表单内容时可以正常显示，但是改变时一个选择无效，显示状态没有修改成功问题；如下图所示： 2、使用说明：仅部分主要代码，markList 为被选项列表。 // 修改客户标签改变 , i handleRoleCheckedChange(m) { this.markList.forEach((itds, i) => { if (itds.wholesaler_mark_id === m.wholesal
element table中加入input、checkbox 数据无法正常渲染问题
u011028557的博客
08-01 639
element table中加入input、checkbox 数据无法正常渲染问题
el-checkbox-group中el-checkbox的内容不显示
08-23
你可以检查以下几个可能的原因来解决el-checkbox-group中el-checkbox内容不显示的问题： 1. 确保你已经正确引入了Element UI库，并且el-checkbox和el-checkbox-group组件都已经在你的代码中注册。 2. 检查你的数据绑定是否正确。确认el-checkbox-group的v-model绑定的数据是一个数组，并且数组中的元素与el-checkbox的value属性对应。 3. 确保你正确地使用了v-for指令来循环渲染el-checkbox组件。检查v-for指令的语法和作用域变量是否正确。 4. 检查el-checkbox组件的label属性是否设置正确。如果label属性为空或者未设置，el-checkbox将不会显示任何内容。 5. 检查CSS样式是否干扰了el-checkbox的显示。可以通过调整样式或者使用浏览器的开发者工具来排查样式问题。 如果以上方法都无法解决问题，建议提供更多相关的代码和错误信息，以便我能够更准确地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值