當我們使用 Elemet UI 的選擇元件進行多選時，Select 元件的繫結值是一個數組，但是陣列的值只能傳入 Number 型別或者 String 型別的資料，如果我們想向其中傳入一個物件就會出錯，如：

<template>
	<el-select v-model="permissionList" multiple placeholder="請選擇">
		<el-option v-for="item in groups" :key="item.groupID" :label="item.name" :value="item" />
	</el-select>
</template>

<script>
export default{
	data() {
		return {
			permissionList: [],
			groups: [{
				id: 1,
				name: 'A組',
				permission: 'Write'
			},{
				id: 2,
				name: 'B組',
				permission: 'Write'
			},{
				id: 3,
				name: 'C組',
				permission: 'Write'
			}]
		}
	}
}
</script>
 

但是這樣元件在選擇的時候就會出錯：

同時，控制檯報錯：

vue.runtime.esm.js:619 [Vue warn]: <transition-group> children must be keyed: <ElTag>

• 1

我們可以發現其為缺少一個索引，翻查 elemnet-ui 的文件，可以查閱到 Select 元件有一個屬性：

那麼，我們可以為其新增一個索引的屬性，這個 value-key 即為我們繫結物件的唯一識別符號，如在上述的例子中，這個識別符號為groupID

所以可以將上面的程式碼改動為：

<template>
	<el-select 
		v-model="permissionList" 
		multiple 
		placeholder="請選擇"
+		value-key="groupID"
	>
		<el-option v-for="item in groups" :key="item.groupID" :label="item.name" :value="item" />
	</el-select>
</template>