rendering a list inside Element UI checkbox group

Question

I'm trying to render some Element UI checkboxes from an array of strings that I'm getting from the server.

<el-form-item
  label="Predefined Labels"
>
  // added this div because I wanted to see if I can render correctly using other component
  <div
    v-for="label in predefinedLabels"
    :key="label"
  >
    {{ label }}
  </div>
  <el-checkbox-group
    v-model="userForm.profile.labels"
    size="medium"
  >
    <el-checkbox-button
      v-for="label in predefinedLabels"
      :key="label"
      :label="label"
    >
      {{ label }}
    </el-checkbox-button>
  </el-checkbox-group>
</el-form-item>

Using this code, I am rendering the predefinedLabels with the div but not with the checkbox button.

I'm getting the following error:

https://i.stack.imgur.com/6Flha.png

How can I have a length error about my list when I've already rendered it and seen that it is present and has elements, and, implicitly, length?

Answer 1

I added some comments to the code.

<el-form-item
  label="Predefined Labels"
>
  // I added this div because I wanted to see if I can render correctly using other component
  

  // using v-for in div doesn't make sense since predefinedLabels should contain checkboxes.
  // Even if you need multiple checkbox groups you can add v-for to "el-checkbox-group"
  // and make its v-model dynamic.
  <div>
  <el-checkbox-group
    v-model="userForm.profile.labels"
    size="medium"
  >
    <el-checkbox-button
      v-for="label in predefinedLabels"
      :key="label"
      :label="label"
    >
      {{ label }} // you pass the label as a prop, so you shouldn't put it here.
    </el-checkbox-button>
  </el-checkbox-group>
 </div> // closing tag should be here.
</el-form-item>

Answer 2

This could be a bit late but the length property is probably called on v-model so check that your userForm.profile.labels has the correct data type and is defined.