在Element UI复选框组中呈现列表

问题描述

我正在尝试从服务器获取的字符串数组中呈现一些Element 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而不是复选框按钮来呈现预定义标签。

我遇到以下错误：

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

当我已经渲染列表并看到它存在并且包含元素以及隐式的长度时，如何显示列表长度错误？

解决方法

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

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

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

javascript vue.js