elementUI checkBox报错Cannot read property 'length' of undefined解决

更新时间：2023年06月26日 09:25:04 作者：他的猫MM

这篇文章主要为大家介绍了elementUI 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 [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中，我的这样绑定的：

<!-- 多选 -->
<template>
  <el-checkbox-group v-model="examData[current].answer">
    <el-checkbox 
      :label="item"
      v-for="(item, index) in examData[current].tmDa"
      @change="examData[current].complete = true">
      <strong>{{String.fromCharCode('A'.charCodeAt(0) + index)}}</strong>
      <span>{{item}}</span>
    </el-checkbox>
  </el-checkbox-group>
</template>

在data选项中：

data() {
  return {
    examData: [
      {
        answer: [],
        title: '问题，问题，问题？',
        options: [
          '答案1',
          '答案2',
          '答案3',
          '答案4',
        ],
        complete: false,
      },
    ]
  }
}

报错的原因：

在data中其实是我们的静态数据，从后端拿到的数据赋值给examData，发现examData里少了answer 的字段

我们必须给数据添加answer字段并给类型为数组

以上就是elementUI checkBox报错Cannot read property ‘length‘ of undefined解决的详细内容，更多关于elementUI checkBox报错的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue 页面卡死,点击无反应的问题及解决
这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue3如何避免样式污染的方法示例
本文主要介绍了vue3如何避免样式污染的方法示例,使用scoped可以避免父组件的样式渗透到子组件中,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-09-09
Vue全局事件总线你了解吗
这篇文章主要为大家详细介绍了Vue全局事件总线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue中的三种Props:模板Props、配置Props和状态Props详解
这篇文章介绍了Vue中的Props,主要有三种类型：模板Props、配置Props和状态Props,模板Props用于简单的数据传递和显示,配置Props用于调整组件的行为和外观,状态Props用于管理组件内部的动态数据,每种类型都有其应用场景,理解这些类型可以帮助你设计出更棒的组件
2025-02-02
element-ui table表格控件实现单选功能代码实例
这篇文章主要给大家介绍了关于element-ui table表格控件实现单选功能的相关资料,单选框是指在 Element UI 的表格组件中,可以通过单选框来选择一行数据。用户只能选择一行数据,而不能同时选择多行,需要的朋友可以参考下
2023-09-09
Vue执行流程及渲染示例解析
这篇文章主要为大家介绍了Vue执行流程及渲染解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
npm安装vue@cli报错的简单处理方式
最近工作中遇到了报错,现在将解决的办法分享给大家,下面这篇文章主要给大家介绍了关于npm安装vue@cli报错的简单处理方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-12-12
vue中遇到的坑之变化检测问题（数组相关）
这篇文章主要介绍了vue中遇到的坑之变化检测问题（数组相关），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Vue3 ref构建响应式变量失效问题及解决
这篇文章主要介绍了Vue3 ref构建响应式变量失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
el-select 的下拉框中新增俩自定义按钮的操作方法
文章介绍了在Element UI的el-select组件中新增自定义按钮的方法,并详细说明了设置`popper-append-to-body`属性为false的重要性,以及如何通过修改样式来实现自定义按钮的添加和样式效果展示,感兴趣的朋友跟随小编一起看看吧
2024-11-11