鍍金池/ 問答/HTML/ [Vue warn]: <transition-group> chi

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

使用vue+element-ui搭建的前端,在用遠程檢索的選擇框組件的時候出現(xiàn)了一個很詭異的事情:

<el-form-item label="關(guān)聯(lián)對話">
    <el-select
        v-model="relatedDialogAdd"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="請輸入關(guān)鍵詞"
        :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}]類似的數(shù)組格式
        }, 200);
    });
}

以上都是按照餓了么element-ui文檔里面的例子寫的,數(shù)據(jù)格式啥的都一樣,key值也有了,但是還是一直報這個錯:

clipboard.png

clipboard.png

因為key值有問題,勾選一個就會直接全選上了,所以想問下有人能看出來問題出在哪里嗎?

回答
編輯回答
默念

你的key值都是null, 換一個key值字段吧

2017年5月8日 18:26
編輯回答
你的瞳

哈哈哈,我也遇到了,但是我找到了答案;
上面有一位其實說的對,item不支持對象,但是可以讓他支持的,關(guān)鍵在于一個配置“value-key”

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

然后el-option的value哪里配置位item,這樣el-select的model就是對象集合了

2017年2月17日 08:20
編輯回答
旖襯

解決了嗎?我遇到了同樣的問題。。。

2017年5月8日 02:07
編輯回答
維她命

需要將el-select加一個value-key屬性,這個值是你綁定的值里面有的一個字段,且值不應該是對象

作為 value 唯一標識的鍵名,綁定值為對象類型時必填
2018年6月3日 05:10