ElementUI el-select綁定對象報錯<transition-group> children must be keyed: <ElTag>的解決方案

症狀是選擇的時候會同時選取所有的選項，同時控制檯報錯<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上；放錯位置是不會生效的。