I'm using Vuetify autocomplete component and I want it to display a default value in its input field

I tried to pass just value as prop and change v-model field to any string but it doesn't work - an input field is empty unless I choose value form the list

Vuetify official example

<v-autocomplete
        v-model="select"
        :loading="loading"
        :items="items"
        :search-input.sync="search"
        cache-items
        class="mx-3"
        flat
        hide-no-data
        hide-details
        label="What state are you from?"
        solo-inverted
      ></v-autocomplete>

new Vue({
  el: '#app',
  data () {
    return {
      loading: false,
      items: [],
      search: null,
      select: 'Alabama',
      states: [
        'Alabama',
        'Alaska',
        'American Samoa',
        'Arizona',
        'Arkansas',
        'California',
        'Colorado',
      ]
    }
  },
  watch: {
    search (val) {
      val && val !== this.select && this.querySelections(val)
    }
  },
  methods: {
    querySelections (v) {
      this.loading = true
      // Simulated ajax query
      setTimeout(() => {
        this.items = this.states.filter(e => {
          return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
        })
        this.loading = false
      }, 500)
    }
  }
})

1 Answers

1
User 28 On Best Solutions

I think you should use v-combobox instead of v-autocomplete.

With Combobox, you can allow a user to create new values that may not be present in a provided items list.

See the example of the difference between them here.