CODEWITHSUNDEEP
vue.jsvuejs2comboboxvue-componentvuetify.js
code-8
code-8

Reputation: 58652

How to add an on Select event to an Auto complete combobox?

I have this Combobox

enter image description here

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

I have a hard time detecting what was selected. Ex. If I select "Massachusetts" I want to access that.

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

Upvotes: 0

Views: 1815

Answers (2)

Merdan Chariyarov
Merdan Chariyarov

Reputation: 33

You should use @keydown with @change, and wrap the api call function with setTimeout - for debounce. And trigger your api call for every event you want together!

Upvotes: 0

Rohullah Muhammadee
Rohullah Muhammadee

Reputation: 311

Give a @change="onChange" event to your component.

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

Upvotes: 2

Related Questions