ElementUI el-select绑定对象报错<transition-group> children must be keyed: <ElTag>的解决方案
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
症状是选择的时候会同时选取所有的选项,同时控制台报错<transition-group> children must be keyed: <ElTag>
。
简而言之,是因为没有指定el-select的value-key属性,或者没有正确指定el-select的value-key属性。按照官网的说法:
如果 Select 的绑定值为对象类型,请务必指定
value-key
作为它的唯一性标识。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value-key | 作为 value 唯一标识的键名,绑定值为对象类型时必填 | string | — | value |
正确的使用方法如下:
<template>
<!--value-key的值对应于item里的唯一字段-->
<el-select v-model="value"
value-key="label">
<el-option v-for="item in options"
:label="item.label"
:key="item.label"
:value="item"/>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: {}
}
}
}
</script>
如果允许同时选择多个选项,添加multiple属性,并且把value改成[]
即可:
<template>
<el-select v-model="value"
value-key="label"
multiple>
<el-option v-for="item in options"
:label="item.label"
:key="item.label"
:value="item"/>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: []
}
}
}
</script>
可能还有一个需要注意的地方,就是value-key的位置,一定要放在el-select上,而不是el-option上;放错位置是不会生效的。




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:6 个月前 )
c345bb45
10 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 10 个月前
更多推荐
所有评论(0)