- 通过设置value-key来绑定唯一值,建议使用对象的id
2、如果在 el-select 中设置了 value-key,但是仍然无法正确选中对象类型的值,可能是因为在 value 中传递了一个引用地址。
解决该问题的方法是,在 v-model 中使用一个新的对象类型的值来绑定选中的对象,确保 v-model 中绑定的值与选项列表中的对象不是同一个引用地址。例如,可以使用 lodash 库中的 cloneDeep 方法,将选中的对象克隆一份新的来作为 v-model 中的绑定值。
以下是一个示例代码实现:
<template>
<el-select v-model="selectedItem" v-bind:value-key="valueKey">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
</el-select>
</template>
<script>
import _ from 'lodash'
export default {
data() {
return {
valueKey: 'id',
options: [
{id: 1, label: '选项1'},
{id: 2, label: '选项2'},
{id: 3, label: '选项3'}
],
selectedItem: {} // 选中的对象
}
},
watch: {
// 监听选中项的变化
selectedItem: {
handler(newVal) {
console.log(newVal); // 输出选中的对象
},
deep: true // 深度监听对象的变化
}
},
mounted() {
// 将选中的对象克隆一份新的来绑定到 v-model 上
this.selectedItem = _.cloneDeep(this.options[0])
}
}
</script>
在上述代码中,通过使用 watch 来监控选中的对象的变化。在 mounted 钩子函数里,首先将 this.options[0](即 “选项1”)克隆一份新的对象,然后将它赋值给 this.selectedItem。这样就可以确保 v-model 中绑定的值与 options 中的对象不是同一个引用地址了。
需要注意的是,如果将 v-model 中的值设置为对象类型,需要开启 deep 模式来深度监听对象变化,否则无法在选中对象中修改属性时触发 watch 监听。