在元素UI复选框组中呈现列表

Question

我正在尝试从从服务器获得的字符串数组中呈现一些元素UI复选框。

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

使用这段代码，我使用div而不是checkbox按钮来呈现predefinedLabels。

我得到以下错误：

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

当我已经呈现了我的list，并且看到它存在，并且有元素，并且隐式地有length时，我怎么会有关于list的长度错误？

Answer 1

我在代码中添加了一些注释。

<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

这可能有点晚了，但可能会在v- userForm.profile.labels上调用length属性，因此请检查您的userForm.profile.labels是否具有正确的数据类型以及是否已定义。