nimavat.me

Java, Groovy, Grails, Spring, Vue, Ionic + Fun blog

Set initial default value for vuetify autocomplete and combobox

|

The following code snippet shows how to set initial default value for vuetify v-autocomplete component. The same would work also for v-combobox component.

To set the initial value, the v-model needs to be set to the initial item, and the item needs to be present in items array.

   <v-autocomplete
        v-model="selectedItem"
        :items="items"                                 
        :search-input.sync="searchQ"
        item-text="name" item-value="id"              
    />
data() {
      return {
          selectedItem: {id:1, name: "My selected item"}, 
          searchQ: null,             
          items: [{id:1, name: "Selected Topic", subject:{name: "polity"}}],
    }
  },
  methods: {    
      query(val){ //do backend query here }
  },

  watch: {
      searchQ (val) {            
          if(val && val.length > 2 && val != this.selectedItem?.name) this.query(val)
      }
  }

Its just an example, the actual selectedItem may be an object from vuex store.

When the initial value is set, vuetify will fire search-input event. To prevent querying the backend when default value is