关于el-checkbox-group 报错 length 未定义

最新推荐文章于 2023-08-11 17:35:49 发布
最新推荐文章于 2023-08-11 17:35:49 发布
阅读量470 收藏
点赞数 2
文章标签： 前端 javascript vue.js 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54882260/article/details/133050871
版权

 问题原因：页面在初始化的时候el-checkbox-group 的v-model要绑定一个数组，但是我的在生命周期的created中才为其绑定数据，造成再渲染dom时绑定数据类型不对而报错

解决办法：1.在视图渲染之前给该值赋值为空数组 

解决办法： 2 在data中定义的数据初始化一个数组

推荐使用方法2，方法1虽然可以实现但是有点费劲，方法1思路是使用watch监听，加上 immediate: true, // 初始化时让handler调用一下 ，说白了就是在视图未渲染时赋个值，这样渲染的时候就OK了

方法2举个栗子：下图1，我在data中定义了一个属性，并在里面初始化要渲染的多选框的值，后面随便操作了，初始化就不报错了

 总结：报错皆有因果，找到它，解决它

harry的代码之路
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementUI中的el-checkbox-group报错Cannot read property ‘length‘ of undefined
HandsomestLiu的博客
12-07 4227
原代码： template: <el-checkbox-group v-model="formData.bczlChecked" v-for="(item, index) in checkInfo" :key="index" > <el-col :span="24"> <el-for
el-checkbox-group 使用遇到的坑
qq_41957192的博客
11-24 3374
想实现的功能 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.
el-checkbox-group报错length的问题
weixin_69675092的博客
08-11 426
之前错误的写法是把v-model=“form.gradeData”,就导致一直有问题，改了之后就好了。
使用element中的复选框，报错“ Cannot read properties of undefined (reading ‘length‘)”
熬夜搬码员的博客
04-04 1574
但在项目中使用element框架中的复选框的时候，明明有数据却报错“ Cannot read properties of undefined (reading 'length')”，仔细观察后才发现，是因为复选框初始化的时候v-model绑定的是undefined，所以初始化的时候给个数组就好了。
elementUI中的el-checkbox报错Cannot read property ‘length‘ of undefined
热门推荐
weixin_38547641的博客
09-01 1万+
在使用el-checkbox时遇上这样的错误： TypeError: Cannot read property ‘length’ of undefined at VueComponent.isLimitDisabled (element-ui.common.js?ccbf:6452) at Watcher.get (vue.esm.js?efeb:4482) at Watcher.evaluate (vue.esm.js?efeb:4587) at VueComponent.computedGetter [
关于element-ui中，checkbox绑定数组报错
ly1477868382的博客
12-03 1132
报错：vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of null (reading 'length')绑定的是数组，不能用null代替。
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应...
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
React复选框树 一个简单优雅的复选框树，用于... node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss 在样式表中包含以
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length‘ of null
yxm_136452789的博客
11-03 2083
vue 使用 elementUi的el-checkbox一直报TypeError: Cannot read property ‘length’ of null。 报错 报错原因 v-model绑定的值在定义的时候有问题，多选框类型应该定义为数组，之前是checkList:null。 <el-checkbox-group v-model="checkList" :disabled="disabled" @change="handleChange($event, re
解决：使用elementUI中的el-checkbox遇上Cannot read property ‘length‘ of undefined的错误
elephant_my的博客
02-18 4701
具体报错如下： 报错原因 在data中定义的时候有问题，多选框是数组形式，之前定义的"ruleForm": {"alarmType": undefined}。 多选框的实现代码 <el-form-item label="报警方式" prop="alarmType"> <el-checkbox-group v-model="ruleForm.alarmType"> <el-checkbox v-for="item in alarmTypeDict" :la
使用elementUI中的el-checkbox报Cannot read property ‘length‘ of undefined
wjw_de_java的博客
01-25 822
报错： 官网的代码实现： 我的代码是在vue中的定义了 v-model 的值是 form.checkedCities的原因 v-model="from.checkedCities" @change="handleCheckedCitiesChange"> 如果这样写的话，就要把官网在return中定义的checkedCities: [‘上海’, ‘北京’]定义到from中就不会报错了 ...
使用element-ui的checkbox插件报错vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property ‘length‘ of un
qq_38502227的博客
11-12 3870
前言：刚好遇到这个问题，亲测有效 1.完整报错信息 2.解决 在使用el-checkbox-group组件的时候，一定要为其指定一个数组来存放多选框组的值，不然就会报这个错。
element checkbox组件选中与未选中时对应的value值定义
qq_35018214的博客
12-09 1万+
element checkbox组件选中与未选中时对应的value值定义 1、默认情况下：在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。 <template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="...
“TypeError: Cannot read properties of undefined (reading ‘length‘)“el-checkbox-group
qq_16902059的博客
03-17 6875
使用element ui的Checkbox，报错Error in render: "TypeError: Cannot read properties of undefined (reading 'length')" emmmm，当时我是自定义el-tree,并递归初始化树的数据，因为是先写了初始化树结构，再填充的数据，导致我在初始化树结构时，定义的el-checkbox-group的v-model字段为[]删掉了，也就是说没初始化后el-checkbox-group的v-model字段指向了undefi
element-ui el-checkbox的一些坑
beichen3997的博客
10-09 4064
&lt;!-- StcsmRole.vue --&gt; &lt;template&gt; &lt;div&gt; &lt;el-row&gt; &lt;!-- 权限选择 --&gt; &lt;el-col :span="20" class="title"&gt; &lt;span class="sel
checkbox动态绑定数据（无法绑定问题）报length错误
weixin_55029563的博客
03-21 3097
最近在使用vue开发考试系统时，前端遇到了这样一个问题。 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')" <!-- 把值绑定到存放id和答案对应的关系对象的一个属性--> <el-radio-group v-model="studentAnswers[question.id]" > <!--循环遍历所有选项 -->
el-checkbox-group多选框编辑时渲染显示，修改选择无效问题；
onlylele的博客
03-30 2452
1、问题描述：使用elementui 中的多选框组件，编辑表单内容时可以正常显示，但是改变时一个选择无效，显示状态没有修改成功问题；如下图所示： 2、使用说明：仅部分主要代码，markList 为被选项列表。 // 修改客户标签改变 , i handleRoleCheckedChange(m) { this.markList.forEach((itds, i) => { if (itds.wholesaler_mark_id === m.wholesal
el-checkbox-group报错TypeError: Cannot read properties of undefined (reading 'length')
最新发布
04-04
报错"TypeError: Cannot read properties of undefined (reading 'length')"通常是因为在使用el-checkbox-group时，传入的数据源（即选项列表）为undefined或者没有正确设置。 要解决这个问题，你可以按照以下步骤...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值