Vue warn警告children must be keyed

使用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值也有了，但是还是一直报这个错：

 

因为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就是对象集合了。

以上是 Vue warn警告children must be keyed 的全部内容， 来源链接： utcz.com/a/15851.html

回到顶部