使用elementUI中的el-checkbox遇上Cannot read property ‘length‘ of undefined错误应该怎么办?

TypeError: Cannot read properties of undefined (reading ‘state‘) Cannot read properties of undefined 阅读详情
在使用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 [as isLimitDisabled] (vue.esm.js?efeb:4839)
at VueComponent.isDisabled (element-ui.common.js?ccbf:6455)
at Watcher.get (vue.esm.js?efeb:4482)
at Watcher.evaluate (vue.esm.js?efeb:4587)
at VueComponent.computedGetter [as isDisabled] (vue.esm.js?efeb:4839)
at Object.get (vue.esm.js?efeb:2104)
at Proxy.checkboxvue_type_template_id_d0387074_render (element-ui.common.js?ccbf:6161)

在template中,我的这样绑定的:

<th>举例:</th>
<td>
  <el-form-item prop="creditCheckFlg">
     <el-checkbox-group v-model="form.creditCheckFlg">
       <el-checkbox :label="'栗子1'"></el-checkbox>
       <el-checkbox :label="'栗子2'"></el-checkbox>
       <el-checkbox :label="'栗子3'"></el-checkbox>
       <el-checkbox :label="'栗子4'"></el-checkbox>
     </el-checkbox-group>
   </el-form-item>
</td>

在data选项中:

data() {
    return {
      form: {
      	creditCheckFlg:''
      }
   }
}

然后我感觉是因为层级太深的原因,然后报了8个关于checkbox的错误。
之后我把和chckbox绑定的数据放在了外层,然后就没有报错了。

<th>举例:</th>
<td>
  <el-form-item prop="creditCheckFlg">
     <el-checkbox-group v-model="creditCheckFlg">
       <el-checkbox :label="'栗子1'"></el-checkbox>
       <el-checkbox :label="'栗子2'"></el-checkbox>
       <el-checkbox :label="'栗子3'"></el-checkbox>
       <el-checkbox :label="'栗子4'"></el-checkbox>
     </el-checkbox-group>
   </el-form-item>
</td>

在data选项中:

data() {
    return {
      	creditCheckFlg:''
   }
}

时隔多年~

解决方案1:
原先就在data里面定义好对应的checkbox的v-model的值 定义为一个空数组
解决方案2:
如果v-model的绑定值是动态渲染的,就手动再次设置表单对应checkbox的绑定值初始值为空数组

解决复选框属性为undefined的问题 在使用 jQuery 或纯 JavaScript 编写代码时,有时会遇到复选框的属性值为 undefined 的问题。方法来获取复选框的属性值,有时会返回 undefined。方法返回的是属性的实际值,而不是属性的初始值。方法来检查具有 id 为 “checkboxId” 的复选框是否被选中,并将结果存储在。方法来获取具有 id 为 “checkboxId” 的复选框的选中状态,并将其存储在。方法来获取复选框的选中状态。以下是几种常见的解决方法,你可以根据自己的需求选择其中一种。方法来获取复选框的属性值。 阅读详情

相关推荐

同济大学824复试全攻略:从笔试到面试的实战解析

本文详细解析同济大学824复试全流程,包括专业课笔试、外语听力与口语、专业外语笔试和专业综合面试的备考策略。重点分享数字信号处理、计算机网络等专业课的高效学习方法,以及专业外语速成和口语面试技巧,助力考生全面提升复试表现。

qq_27496129的博客 1055

elementUI中的el-checkbox报错Cannot read property ‘length‘ of undefined

在使用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 [

weixin_38547641的博客 1万+

总结-NuerIPS2023-Direct Preference Optimization:Your Language Model is Secretly a Reward Model

对比PPO,DPO的泛化能力更强。

m0_60361484的博客 1607

VUE解决Cannot read property ‘length‘ of undefined(发生原因以及解决思路)

这个错误是什么 某个数组找不到值,有一个地方进行了强行赋值 为什么会报这个错误 因为你在使用数组时,有一些v-for循环渲染,它不是拿着data创建的 [] 空数组去遍历,而是在某个地方你去获取下拉框的数据,或者获取data数组的数据时,你强行将原本的 data 挂载的数据 由 [] 变成 undefined,在页面上的v-for渲染就会直接报错! 而不是什么在v-if="data"判断这个,这种解决方法就是不让其渲染了。根本没有解决问题所在。 怎么解决这个错误 首先,你必须去检查生命周期里的所有

hikktn的博客 4943

ZYNQ开发(2)在Linux系统层上PL-PS通过AXI-DMA传输数据详细步骤及注意事项

参考的网络资料 https://github.com/bperez77/xilinx_axidma/tree/master https://gitlab.gnome.org/HosseinBeheshti/UlteraZed7EV/-/tree/master/petalinux/xilinx_axidma https://www.icode9.com/content-3-925319.html https://blog.youkuaiyun.com/weixin_38218267/article/details/1

aizaiyueye的专栏 3448

[ vulhub漏洞复现篇 ] Jetty WEB-INF 文件读取复现CVE-2021-34429

[ vulhub漏洞复现篇 ] Jetty WEB-INF 文件读取复现CVE-2021-34429 可以使用一些编码字符来制作URI,以访问WEB-INF目录的内容和/或绕过一些安全限制。默认合规模式允许带有包含 %u002e 段的 URI 的请求访问WEB-INF目录中的受保护资源。

qq_51577576的博客 3208

vue项目中遇到Cannot read properties of undefined (reading 'length')

在浏览器F12下,发现如下报错: Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read properties of undefined (reading 'length')" TypeError: Cannot read properties of undefined (reading 'le...

2023年最新地推相关信息 1万+

Transformer实战——Transformer自编码模型

自编码模型依赖于原始 Transformer 编码器,并且在解决分类问题时非常高效。除了 BERT 外,还有许多流行的自编码模型,在本节中,我们将一些除 BERT 外的自编码模型,这些模型的目标是通过优化预训练过程、增加层数或头数、改善数据质量、设计更好的目标函数等,来在下游任务上取得更好的表现。这些改进大致可以分为两个方面,更好的架构设计选择和预训练控制。

盼小辉丶的博客 9340

解决:使用elementUI中的el-checkbox遇上Cannot read property ‘length‘ of undefined的错误

具体报错如下: 报错原因 在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

elephant_my的博客 5276

Google Earth Engine 实现图像随机森林分类_遥感分类全流程详解

本文将通过一段完整的GEE代码,逐步讲解如何利用Sentinel-2影像和随机森林算法,实现地表覆盖分类。代码包含等关键步骤,适合遥感入门学习!

国科大硕士在读,分享Python/GEE/Matlab/R专业代码实践,涵盖数据分析、算法开发与应用技巧等,以代码会友。 916

数据分析必问:Pandas面试题及参考答案

DataFrame是Pandas库中的一个核心数据结构,它类似于Excel中的表格,可以存储不同类型的数据。在Pandas中,抽样操作通常很简单,但是需要根据数据的特点和分析的需求来选择合适的抽样方法。数据标准化和归一化是数据预处理中常用的技术,目的是将数据调整到一个合适的范围内,以消除不同特征量纲和数值范围的差异,从而保证模型训练的有效性。CSV文件是一种文本文件,其中的数据以逗号分隔。不平衡数据集指的是数据集中各类别样本的数量差异较大的情况,这可能导致模型训练出现偏差,影响模型的泛化能力。

大模型大数据攻城狮的专栏 3009

elementUI中的el-checkbox-group报错Cannot read property ‘length‘ of undefined

原代码: template: <el-checkbox-group v-model="formData.bczlChecked" v-for="(item, index) in checkInfo" :key="index" > <el-col :span="24"> <el-for

HandsomestLiu的博客 4695

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

TypeError: Cannot read property ‘length’ of undefined

el-checkbox控制台报错TypeError: Cannot read property ‘length’ of undefined

会思想的苇草i的博客 3205

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

使用elementUI中的el-checkbox报Cannot read property ‘length‘ of undefined

报错: 官网的代码实现: 我的代码是在vue中的定义了 v-model 的值是 form.checkedCities的原因 v-model="from.checkedCities" @change="handleCheckedCitiesChange"> 如果这样写的话,就要把官网在return中定义的checkedCities: [‘上海’, ‘北京’]定义到from中就不会报错了 ...

wjw_de_java的博客 983

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

复选框报错

后端送数据给前端,复选框显示异常并报错

DJDLJRCJ的博客 332

element-ui——el-checkbox报错Cannot read property ‘length‘ of undefined

例子: <el-form-item label="标签一" prop="List"> <el-checkbox-group v-model="form.List"> <el-checkbox label="1">看电视</el-checkbox> </el-checkbox-group> </el-form-item> data() { return { form: { L

qq_43201350的博客 1274

Vue+ECharts实现消费中位数柱状图的完整工程实践

中位数是描述偏态分布数据集中趋势的核心统计量,相比平均数更能抵抗异常值干扰;柱状图则是展示分类维度下统计指标最直观的可视化形式。理解中位数计算原理(排序取中+数据清洗)与图表语义表达逻辑(坐标轴类型、缩放控制、标签可读性),是构建可靠BI图表的基础能力。在前端工程中,Vue提供响应式状态管理,Axios保障健壮的数据获取,ECharts实现精准的统计图表渲染,三者协同构成‘数据→统计→可视化’闭环。本文以高职国赛真实任务为场景,详解从原始消费流水清洗、分组聚合、中位数计算到ECharts像素级配置的全流程,

weixin_34396902的博客 403

【Vue2报错系列】解决Uncaught TypeError: Cannot read properties of undefined (reading ‘length‘)

vue的数据绑定在刚开始只是和内存建立联系,并没有真正的和后台的数据挂上钩,所以一开始的。

7292

checkbox动态绑定数据(无法绑定问题)报length错误

最近在使用vue开发考试系统时,前端遇到了这样一个问题。 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')" <!-- 把值绑定到存放id和答案对应的关系对象的一个属性--> <el-radio-group v-model="studentAnswers[question.id]" > <!--循环遍历所有选项 -->

weixin_55029563的博客 3631

报错信息:[Vue warn]: Error in v-on handler: “Error: Provided config url is not valid” 我想这篇文章能够帮助到你

[Vue warn]: Error in v-on handler: "Error: Provided config url is not valid”

你白勺男孩TT的博客 1334

Vue动态控制disabled属性

在Vue中disabled:的值是受布尔值影响的,false为关闭禁用,true为开启禁用效果。通过某个input中值是否为空或者某个id是否为空来控制当前的表单元素是否禁用

前端如逆水行舟... 2万+

“TypeError: Cannot read properties of undefined (reading ‘length‘)“el-checkbox-group

使用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

qq_16902059的博客 7315

使用element中的复选框,报错“ Cannot read properties of undefined (reading ‘length‘)”

但在项目中使用element框架中的复选框的时候,明明有数据却报错“ Cannot read properties of undefined (reading 'length')”,仔细观察后才发现,是因为复选框初始化的时候v-model绑定的是undefined,所以初始化的时候给个数组就好了。

熬夜搬码员的博客 2002

使用element-ui的checkbox插件报错vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'length' of un

1.完整报错信息 2.解决 在使用el-checkbox-group组件的时候,一定要为其指定一个数组来存放多选框组的值,不然就会报这个错。

i++; 8774

element-ui - el-checkbox绑定失效

原文地址:vue与element ui的el-checkbox的坑。

nunumaymax的博客 4500
上一篇: 项目中git常用命令
下一篇: 微信小程序出现sitemap的黄色警告,当前页面将被索引
lt要努力
博客等级 码龄7年 128粉丝 111原创
评论 20
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值