Vue.js v-select下拉显示名称 Axios POST提交对应ID的实现方法

编辑补充：提问者最终通过为v-select添加return-object属性解决了该问题，以下是完整问题分析与修复方案

提交时传课程名称而非课程ID，核心是v-select配置错误+代码存在变量冲突、模型配置错误：

• v-select中item-value设置为name，组件会直接把课程名称作为绑定值，不会读取MongoDB生成的_id字段
• 选中值的变量名和获取全量课程列表的计算属性重名，提交时错把全量课程列表当成选中值传递，重置值时还会因为给无setter的计算属性赋值报错
• Student模型中关联字段的ref配置错误，无法正常关联Course集合

1. 调整v-select配置 #

将item-value改为绑定课程的_id字段，保持item-text为name即可实现「下拉显示课程名称、选中后绑定课程ID」的效果；如果需要选中后获取完整课程对象，再加return-object属性即可。
注意：把v-model绑定的变量名改成和全量课程计算属性不重名的名称，避免变量冲突，记得在组件data中声明该字段初始值为空字符串或null

<v-select
  :items="courses"
  v-model="selectedCourse"
  item-value="_id"
  item-text="name"
  label="Available courses"
  prepend-icon="folder"
  <!-- 如果需要获取完整课程对象再加下面这行 -->
  <!-- return-object -->
>
  <template v-slot:item="{ item, attrs, on }">
    <v-list-item v-bind="attrs" v-on="on">
      <v-list-item-title
        :id="attrs['aria-labelledby']"
        v-text="item.name"
      ></v-list-item-title>
    </v-list-item>
  </template>
</v-select>

2. 修正Axios提交逻辑 #

提交时传入绑定的选中课程值，不要传全量课程列表，提交完成后重置对应字段：

methods: {
  async addItem(){
    const response = await axios.post("http://localhost:4000/api/student", {
      name: this.name,
      // 如果加了return-object，这里改成this.selectedCourse._id
      Courses: this.selectedCourse,
    });
    this.items.push(response.data);
    this.name = "";
    this.selectedCourse = "";
  },
},

获取全量课程列表的计算属性无需修改，保持原有逻辑即可：

computed: {
  courses() {
    return this.$store.state.courses;
  },
}

3. 修正MongoDB Student模型配置 #

关联字段的ref需要对应Course模型的注册名称，原配置写为id是无效的，修正后：

const Student =  mongoose.model(
  "Student",
  new mongoose.Schema({
    name: String ,
    Courses: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "Course"
    },
})
);

module.exports = Student; 

Course模型无需调整，保持原有配置即可正常使用。

内容的提问来源于stack exchange，提问作者EscStack