Element: <transition-group> children must be keyed: <ElTag>

Created on 1 Dec 2017  ·  9Comments  ·  Source: ElemeFE/element

选择器的多选报错,确定数组没问题,绑定的v-model也没问题,不知道为什么报这个错

Most helpful comment

这个我也遇到了, 首先 v-model 和 选择项 都是数组。
我的数据源是 sealUsers 。 是通过异步获取的,初始化的时候 是空数组。 我测了一下 如果<el-option v-for="item in sealUsers"这段代码里面传入空数组 就会报那个警告。 解决方法是外层加一个v-if 。但是我觉得空数组这种场景普遍存在。应该还是属于bug 类型的。

<el-form-item label="印章使用者:" prop="sealUsersSelect">
                                <el-select v-if="sealUsers.length> 0" v-model="sealForm.sealUsersSelect"  multiple disabled placeholder="请选择" style="width:100%;">
                                    <el-option  v-for="item in sealUsers" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                                <div class="select-user-show">
                                    <span>
                                        {{sealUsersSelectShow}}
                                    </span>
                                    &nbsp;&nbsp;可在所有业务分类中使用该印章
                                </div>
                            </el-form-item>

All 9 comments

Hello, this issue has been closed because it does not conform to our issue requirements. Please submit issues with issue-generator. More info can be found in #3693.

@lim-roid 应该你的选项中有默认null项吧,我也遇到此情况,不勾选中它就不报这个。

数据源里应该是有[undefined] [null] 这样的数据

这个我也遇到了, 首先 v-model 和 选择项 都是数组。
我的数据源是 sealUsers 。 是通过异步获取的,初始化的时候 是空数组。 我测了一下 如果<el-option v-for="item in sealUsers"这段代码里面传入空数组 就会报那个警告。 解决方法是外层加一个v-if 。但是我觉得空数组这种场景普遍存在。应该还是属于bug 类型的。

<el-form-item label="印章使用者:" prop="sealUsersSelect">
                                <el-select v-if="sealUsers.length> 0" v-model="sealForm.sealUsersSelect"  multiple disabled placeholder="请选择" style="width:100%;">
                                    <el-option  v-for="item in sealUsers" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                                <div class="select-user-show">
                                    <span>
                                        {{sealUsersSelectShow}}
                                    </span>
                                    &nbsp;&nbsp;可在所有业务分类中使用该印章
                                </div>
                            </el-form-item>

绑定数据初始化为【空数组】即可解决

请问这个问题解决了吗,为了保持结构,只能给多选数组赋值为null来清空,但是数据源切换后就报这个错了,页面渲染



:key="items.dicId"
:label="items.dicName"
:value="getDicId(items.dicId)">



v-for='(items, indexs) in item.children'
:key="items.dicId"
:label="items.dicName"
:value="getDicId(items.dicId)">




数据渲染,其中cooperationList值不变
if (this.selectArr.length > 0) {
this.selectArr.forEach((item, index) => {
if (item instanceof Array) {
item.forEach((item1, index1) => {
this.$set(this.selectArr[index],index1,null);
})
} else {
this.selectArr[index] = '';
}
});
}
//this.$refs['cooperationForm'].resetFields(); // 重置表单
if (response.result && response.result.length > 0) {
let result = response.result;
this.cooperationList.forEach((item,index) => { // 对客户合作信息的数据做处理
for(const value of result) {
if (item.dicId == value.fieldKeyId) {
if (item.dicValue == '1') { //单选
this.selectArr[index] = value.extendInformations[0].fieldValueId;
} else {
value.extendInformations.forEach((item1,index1) => {
this.$set(this.selectArr[index],index1,item1.fieldValueId);
})
}
}
}
})

没有看懂什么意思,具体遇到什么问题了

tangyuanhaha notifications@github.com 于 2018年11月22日周四 15:16写道:

请问这个问题解决了吗,为了保持结构,只能给多选数组赋值为null来清空,但是数据源切换后就报这个错了,页面渲染

数据渲染,其中cooperationList值不变
if (this.selectArr.length > 0) {
this.selectArr.forEach((item, index) => {
if (item instanceof Array) {
item.forEach((item1, index1) => {
this.$set(this.selectArr[index],index1,null);
})
} else {
this.selectArr[index] = '';
}
});
}
//this.$refs['cooperationForm'].resetFields(); // 重置表单
if (response.result && response.result.length > 0) {
let result = response.result;
this.cooperationList.forEach((item,index) => { // 对客户合作信息的数据做处理
for(const value of result) {
if (item.dicId == value.fieldKeyId) {
if (item.dicValue == '1') { //单选
this.selectArr[index] = value.extendInformations[0].fieldValueId;
} else {
value.extendInformations.forEach((item1,index1) => {
this.$set(this.selectArr[index],index1,item1.fieldValueId);
})
}
}
}
})


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ElemeFE/element/issues/8615#issuecomment-440934738,
or mute the thr
https://github.com/notifications/unsubscribe-auth/AgCSOsFzOkNSePQ44XSgjYkMgoIamUwOks5uxk9IgaJpZM4QyKAf

For me it was value-key prop at el-select. Values are objects, and value-key should be unique.
It was not before so get
transition-group children must be keyed: ElTag
warning at console.

数据源里应该是有[undefined] [null] 这样的数据

此楼正解!

Was this page helpful?
0 / 5 - 0 ratings