我明白你的问题啦——当开启return-object后，Combobox的v-model只会绑定匹配预设选项的对象，一旦用户输入不在列表里的内容，course就会变成null或undefined，没法直接拿到输入的文本。要解决这个问题，咱们可以利用Vuetify Combobox提供的**search-input绑定**功能，它专门用来跟踪用户实时输入的内容，不管是否匹配现有选项。

修改后的实现步骤 #

• 在数据中新增一个变量，用来存储用户的输入文本，比如courseInput
• 给Combobox添加v-model:search-input="courseInput"，绑定这个输入跟踪变量
• 在按钮点击的saveItem方法中，直接读取courseInput就能拿到用户输入的内容，同时还能保留原有的course变量来判断是否选中了预设选项

完整代码示例 #

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row>
        <v-col cols="4">
          <v-combobox 
            v-model="course" 
            v-model:search-input="courseInput"
            :items="items" 
            item-value="id" 
            item-text="text" 
            :return-object="true" 
            label="Select a favorite golf course" 
            outlined 
            clearable 
          >
            <template v-slot:append-outer>
              <v-btn small fab dark color="primary">
                <v-icon dark @click="saveItem">check</v-icon>
              </v-btn>
            </template>
          </v-combobox>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      course: null,
      courseInput: '', // 新增：跟踪用户输入的文本
      items: [
        { id: 1, text: "The Bridges" },
        { id: 2, text: "Morgan Run" },
      ],
    }
  },
  methods: {
    saveItem() {
      console.log("用户输入的内容：", this.courseInput);
      console.log("选中的选项对象：", this.course);
      
      // 可以根据业务需求处理：
      if (this.course) {
        console.log("用户选择了预设选项");
      } else {
        console.log("用户输入了新内容");
      }
    }
  }
})

说明 #

• v-model:search-input会实时同步用户在Combobox输入框里的所有内容，包括选择预设选项时的文本，以及手动输入的新内容
• 原有的v-model="course"依然可以用来判断用户是否选中了预设选项：如果course不为null，说明用户选了列表里的选项；如果为null，说明用户输入了不在列表中的新内容

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