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.

        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