如何解决在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>
我遇到以下错误:
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
是否具有正确的数据类型并已定义。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。