H5W3
当前位置:H5W3 > 其他技术问题 > 正文

[Vue warn]: <transition-group> children must be keyed: <ElTag>

使用vue+element-ui搭建的前端,在用远程检索的选择框组件的时候出现了一个很诡异的事情:

<el-form-item label="关联对话">
    <el-select
        v-model="relatedDialogAdd"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
            v-for="(item,key) in relatedDialogOpts"
            :key="key"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
</el-form-item>
remoteMethod(query) {
    let param;
    query === '' ? param = {} : param = {search: query};

    this.$axios.get(this.ip +'/getchat',{
        params: param
    }).then(res => {
        let data = res.data.data.data;
        this.loading = true;
        setTimeout(_ => {
            this.loading = false;
            this.relatedDialogOpts = data.map(item => {
                return {
                    value: item.next_id,
                    label: item.inword
                };
            });
            console.log(this.relatedDialogOpts); //这个打印出的是[{label:"大米",value:null},{label:"苹果",value:null}]类似的数组格式
        }, 200);
    });
}

以上都是按照饿了么element-ui文档里面的例子写的,数据格式啥的都一样,key值也有了,但是还是一直报这个错:

clipboard.png

clipboard.png

因为key值有问题,勾选一个就会直接全选上了,所以想问下有人能看出来问题出在哪里吗?

回答:

需要将el-select加一个value-key属性,这个值是你绑定的值里面有的一个字段,且值不应该是对象

作为 value 唯一标识的键名,绑定值为对象类型时必填

回答:

你的key值都是null, 换一个key值字段吧

回答:

哈哈哈,我也遇到了,但是我找到了答案;
上面有一位其实说的对,item不支持对象,但是可以让他支持的,关键在于一个配置“value-key”

在el-select里面配置value-key,另外我用的不是key,key我没有配置,我也搞不懂他有什么用

然后el-option的value哪里配置位item,这样el-select的model就是对象集合了

本文地址:H5W3 » [Vue warn]: <transition-group> children must be keyed: <ElTag>

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址