Vue.js中v-select选值后显示[object Object]错误的解决求助

问题排查 #

控制台弹出[object Object]错误，多半是v-select的属性配置没按Vuetify组件的规矩来：

• 你写的label="Select"用错了，这个属性是给对象数组选项用的（用来指定显示哪个字段），但你用的是字符串数组，根本不需要它；要是想加输入框的占位提示，得用placeholder。
• 额外绑的@change事件，可能和v-model的响应式更新撞了，导致值传递出问题。

改写方案 #

1. 修正模板中的v-select代码

<div class="col-md-6">
  <label>Status</label>
  <v-select
    v-model="selectedStatus"
    placeholder="选择状态"
    :items="statusOptions"
  ></v-select>
</div>

把原来的字符串数组换成data里定义的结构化选项（看着清楚，还能避免字符串匹配的坑），同时用placeholder替换错用的label属性。

2. 修正Vue脚本代码

data() {
  return {
    selectedStatus: null, // 初始值设成null，和选项的value类型匹配
    openmodel: "Open",
    updatedialog: false,
    selectedRow: {},
    form: {
      status: null,
    },
    result: [],
    baseUrl: "http://127.0.0.1:8000/api/employee",
    // 直接把要提交的数据库值（1/2）设成选项的value，显示文本对应True/False
    statusOptions: [
      { text: 'True', value: 1 },
      { text: 'False', value: 2 }
    ]
  };
},
created() { 
  this.AllEmployees();
},
watch: {
  // 监听选中状态变化，自动同步到form里的status字段
  selectedStatus(newVal) {
    this.form.status = newVal;
  }
},
methods: {
  async addCategory() {
    await EmployeeApi.addReview(this.form);
  },
  // 原来的updateStatus方法可以删掉了，用watch更贴合Vue的响应式逻辑
}

为啥这么改？ #

• 用结构化的statusOptions，直接把数据库需要的1/2作为选项值，不用再写字符串判断的逻辑，少出错。
• 用watch监听选中值的变化，自动同步到表单字段，不用手动绑change事件，更符合Vue的设计思路。
• 修正了v-select的属性错误，避免组件内部出异常。

额外提醒 #

• 确认你的Vuetify版本和代码匹配，不管是2还是3，上面的代码都能用。
• 提交前可以在addCategory里打个日志看看表单数据对不对：

async addCategory() {
  console.log('要提交的表单数据:', this.form); // 检查status是不是1或2
  await EmployeeApi.addReview(this.form);
}

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