在Vue 3中，el-select循环el-option的常见踩坑点，value值绑定对象类型？选中效果不准确？

在Vue 3中使用el-select组件循环生成el-option时，如果希望value绑定的是一个对象类型，需要确保el-select的v-model绑定的是一个对象类型的数据，并且在el-option中绑定的值也是对象类型的。

以下是一个示例代码：

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value.id"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const selectedValue = ref({});
    const options = ref([
      { label: '选项1', value: { id: 1, name: 'Option 1' } },
      { label: '选项2', value: { id: 2, name: 'Option 2' } },
      // ...更多选项
    ]);
 
    return {
      selectedValue,
      options
    };
  }
};
</script>

在这个例子中，selectedValue是一个响应式引用，它被绑定到el-select的v-model上，用来存储选中的对象。options数组中的每个对象都有label和value属性，其中value是一个对象。在el-option中，通过:value="item.value"将每个选项的对象作为值绑定给el-option。

当用户选择一个选项时，selectedValue将会更新为所选择的对象。如果需要展示选中的标签，确保el-option的:label="item.label"正确引用了标签字段。