如何为Vuetify v-combobox添加选中事件获取选中值

现有功能进度 #

• @change 触发API请求填充下拉选项：已完成 ✅
• 选中下拉项执行业务逻辑、获取选中值：未完成 ❌

异常表现：选中下拉项（例如"Massachusetts"）时，无法正确捕获到对应的选中值。

原有问题代码 #

<v-col md="8">
    <v-combobox :items="locations" v-model="rule.value" :label="Name" @change="getLocations(index, rule, rule.attribute_id)" @click="selectLocation(index, rule, rule.attribute_id)"></v-combobox>
</v-col>

<v-col md="12" v-if="rule.operator_id == 15">
    <v-textarea v-model="inListLocations" label="Locations" dense outlined></v-textarea>
</v-col>

修复步骤 #

1. 修正模板事件绑定 #

问题出在事件绑定错误：@click在点击输入框时就会触发，和下拉选项选中的时机完全无关，自然拿不到正确值。直接替换为组件原生提供的@select事件即可，传参时加$event占位，用来接收组件抛出的选中值：

<v-col md="8">
    <v-combobox 
      :items="locations" 
      v-model="rule.value" 
      :label="Name" 
      @change="getLocations(index, rule, rule.attribute_id)" 
      @select="selectLocation($event, index, rule, rule.attribute_id)"
    ></v-combobox>
</v-col>

<v-col md="12" v-if="rule.operator_id == 15">
    <v-textarea v-model="inListLocations" label="Locations" dense outlined></v-textarea>
</v-col>

2. 实现事件回调方法 #

在组件的methods中定义对应的selectLocation方法，第一个参数就是选中的选项值：

methods: {
  // 原有getLocations逻辑保持不变
  getLocations(index, rule, attributeId) {
    // 之前写的拉取下拉选项逻辑不需要改动
  },
  selectLocation(selectedItem, index, rule, attributeId) {
    // selectedItem就是当前选中的选项，选"Massachusetts"时这里就会拿到对应的值
    console.log('选中项内容：', selectedItem)
    // 在这里写选中后要执行的业务逻辑即可，比如把选中值追加到下方文本域
    if (rule.operator_id === 15) {
      this.inListLocations = this.inListLocations 
        ? `${this.inListLocations}\n${selectedItem}`
        : selectedItem
    }
  }
}

注意事项 #

• 如果locations选项是对象格式（比如{id: 1, stateName: 'Massachusetts'}），需要给v-combobox加item-text="stateName"、item-value="id"属性，指定选项的显示文本和取值字段，避免返回整个对象不符合业务预期
• @select事件只会在用户点击下拉列表中的预设选项时触发，用户手动在输入框输入内容不会触发这个事件，可以用来精准区分选中行为和输入行为
• 如果开启了多选模式，@select返回的selectedItem会是数组格式，遍历处理即可

内容的提问来源于stack exchange，提问作者code-8