SoFunction
Updated on 2025-04-12

elementUI checkBox error Cannot read property 'length' of undefined solution

I encountered such an error when using el-checkbox

TypeError: Cannot read property 'length' of undefined
at (?ccbf:6452)
at (?efeb:4482)
at (?efeb:4587)
at [as isLimitDisabled] (?efeb:4839)
at (?ccbf:6455)
at (?efeb:4482)
at (?efeb:4587)
at [as isDisabled] (?efeb:4839)
at (?efeb:2104)
at Proxy.checkboxvue_type_template_id_d0387074_render (?ccbf:6161)

In template, mine is bound like this:

<!-- Multiple choices -->
<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>{{('A'.charCodeAt(0) + index)}}</strong>
      <span>{{item}}</span>
    </el-checkbox>
  </el-checkbox-group>
</template>

In the data options:

data() {
  return {
    examData: [
      {
        answer: [],
        title: 'Question, question, question?  ',
        options: [
          'Answer 1',
          'Answer 2',
          'Answer 3',
          'Answer 4',
        ],
        complete: false,
      },
    ]
  }
}

Reason for the error:

In data, we are actually our static data. The data obtained from the backend is assigned to examData. I found that there is no answer field in examData

We have to add an answer field to the data and give the type to an array

The above is the detailed content of the Cannot read property ‘length’ of undefined error. For more information about elementUI checkBox error, please pay attention to my other related articles!