Javascript 呈现元素UI复选框组内的列表

我试图从服务器获取的字符串数组中呈现一些元素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是因为我想看看是否可以使用其他组件正确渲染
{{label}}
{{label}}

使用这段代码，我使用div而不是checkbox按钮呈现预定义的标签

我得到以下错误：

---

当我已经呈现了列表，并且看到它存在并且包含元素，并且隐式地包含长度时，我怎么会在列表中出现长度错误呢？

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

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

//我添加这个div是因为我想看看是否可以使用其他组件正确渲染
//在div中使用v-for没有意义，因为预定义的标签应该包含复选框。
//即使您需要多个复选框组，也可以将v-for添加到“el复选框组”
//并使其v型动态。
{{label}}//您将标签作为道具传递，因此不应将其放在此处。
//结束标记应该在这里。

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

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

//我添加这个div是因为我想看看是否可以使用其他组件正确渲染
//在div中使用v-for没有意义，因为预定义的标签应该包含复选框。
//即使您需要多个复选框组，也可以将v-for添加到“el复选框组”
//并使其v型动态。
{{label}}//您将标签作为道具传递，因此不应将其放在此处。
//结束标记应该在这里。

这可能有点晚，但可能在v-model上调用了

length

属性，因此请检查您的

userForm.profile.labels

是否具有正确的数据类型并已定义。

这可能有点晚，但可能在v-model上调用了

length

属性，因此请检查您的

userForm.profile.labels

具有正确的数据类型并已定义。

我只添加了该div，以表示我可以使用div呈现数组中的内容，但不使用elementUI中的元素。PredefinedLabels是一个字符串数组。我添加该div只是为了表示我可以使用div呈现数组中的内容，但不使用elementUI中的元素。PredefinedLabels是一个字符串数组。我认为您需要显示更多代码，以获得足够的信息，帮助我们解决问题。了解所有模板代码和脚本代码有助于我们了解问题是否存在于其他地方。我制作了一个代码笔来看看可能会发生什么，它的工作原理正如人们所期望的，这让我相信您的问题必须在您共享的代码块之外。我认为您需要显示更多的代码，以获得足够的信息，帮助我们解决问题。了解所有模板代码和脚本代码有助于我们了解问题是否存在于其他地方。我制作了一个代码笔来看看可能会发生什么，它的工作原理正如人们所期望的，这让我相信您的问题必须在您共享的代码块之外。