快捷導(dǎo)航

elementUI?checkBox報(bào)錯(cuò)Cannot read property 'length' of undefined解決

更新時(shí)間：2023年06月26日 09:25:04 作者：他的貓MM

這篇文章主要為大家介紹了elementUI?checkBox報(bào)錯(cuò)Cannot read property 'length' of undefined的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

在使用el-checkbox時(shí)遇上這樣的錯(cuò)誤

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選項(xiàng)中：

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

報(bào)錯(cuò)的原因：

在data中其實(shí)是我們的靜態(tài)數(shù)據(jù)，從后端拿到的數(shù)據(jù)賦值給examData，發(fā)現(xiàn)examData里少了answer 的字段

我們必須給數(shù)據(jù)添加answer字段并給類型為數(shù)組

以上就是elementUI checkBox報(bào)錯(cuò)Cannot read property ‘length‘ of undefined解決的詳細(xì)內(nèi)容，更多關(guān)于elementUI checkBox報(bào)錯(cuò)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue?頁面卡死,點(diǎn)擊無反應(yīng)的問題及解決
這篇文章主要介紹了vue?頁面卡死,點(diǎn)擊無反應(yīng)的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3如何避免樣式污染的方法示例
本文主要介紹了vue3如何避免樣式污染的方法示例,使用scoped可以避免父組件的樣式滲透到子組件中,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-09-09
Vue全局事件總線你了解嗎
這篇文章主要為大家詳細(xì)介紹了Vue全局事件總線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
Vue中的三種Props:模板Props、配置Props和狀態(tài)Props詳解
這篇文章介紹了Vue中的Props,主要有三種類型：模板Props、配置Props和狀態(tài)Props,模板Props用于簡單的數(shù)據(jù)傳遞和顯示,配置Props用于調(diào)整組件的行為和外觀,狀態(tài)Props用于管理組件內(nèi)部的動態(tài)數(shù)據(jù),每種類型都有其應(yīng)用場景,理解這些類型可以幫助你設(shè)計(jì)出更棒的組件
2025-02-02
element-ui?table表格控件實(shí)現(xiàn)單選功能代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于element-ui?table表格控件實(shí)現(xiàn)單選功能的相關(guān)資料,單選框是指在?Element?UI?的表格組件中,可以通過單選框來選擇一行數(shù)據(jù)。用戶只能選擇一行數(shù)據(jù),而不能同時(shí)選擇多行,需要的朋友可以參考下
2023-09-09
Vue執(zhí)行流程及渲染示例解析
這篇文章主要為大家介紹了Vue執(zhí)行流程及渲染解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
npm安裝vue@cli報(bào)錯(cuò)的簡單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
vue中遇到的坑之變化檢測問題（數(shù)組相關(guān)）
這篇文章主要介紹了vue中遇到的坑之變化檢測問題（數(shù)組相關(guān)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決
這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
el-select 的下拉框中新增倆自定義按鈕的操作方法
文章介紹了在Element UI的el-select組件中新增自定義按鈕的方法,并詳細(xì)說明了設(shè)置`popper-append-to-body`屬性為false的重要性,以及如何通過修改樣式來實(shí)現(xiàn)自定義按鈕的添加和樣式效果展示,感興趣的朋友跟隨小編一起看看吧
2024-11-11