如何将选择事件添加到自动完成组合框？

Question

我有这个组合框

@change call API + populated list - Done ✅
@select doSomething() - Not Done ❌

我很难检测到所选择的内容。前任。如果我选择“马萨诸塞州”，我想访问它。

<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>

Answer 1

为您的组件提供

@change="onChange"

事件。

<v-autocomplete
        v-model="values"
        :items="items"
        outlined
        dense
        item-text="name"
        item-value="id"
        return-object
        @change="onChange"
        @input="onInput"
        label="Outlined"
        multiple
      ></v-autocomplete>

data(){
   return {
     items: [
       { id: 1, name: "LIMASSOL DISTRICT (LEYMASUN)" }
       { id: 2, name: "LA MASSANA" }
     ]
   }
},
methods:{
  onChange(item){
     console.log("on change:   ", item);  // Now you should have access to your selected option.
     this.getItems(item.id);  // Here send your item id and request for details.
  },
  onInput(item){
    console.log("on input:   ", item);
  },
  async getItems(id){ 
    const response = await this.$axios.get('items/'+ id);
    this.yourData = response.data?.yourData;
}

Answer 2

您应该将 @keydown 与 @change 结合使用，并使用 setTimeout 包装 api 调用函数 - 用于防抖。并为您想要一起发生的每个事件触发您的 api 调用！