Vuetify autocomplete - how to pass default value?

Question

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

@Toodoo sorry this example here vuetifyjs.com/ru/components/autocompletes#asynchronous-items — Person
– Person, Commented May 13, 2019 at 16:08
@Allan than you, looking at the code in that example allowed me to resolve my problem with this. — Jeff Bluemel
– Jeff Bluemel, Commented May 3, 2020 at 17:11
See if this helps - nimavat.me/blog/vuetify-autocomplete-default-value — Sudhir N
– Sudhir N, Commented Sep 6, 2022 at 5:19

StvnSpnz · Accepted Answer · 2020-01-20 17:39:13Z

12

I ran into this and what I did was passing to the v-model, the element at the 0 index position from the list:

:items="items"
v-model="items[0]"

answered Jan 20, 2020 at 17:39

StvnSpnz

3334 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chris · Accepted Answer · 2020-02-01 21:16:49Z

11

The v-autocomplete component will not display "Alabama" since "Alabama" is not found in items. All you need to do is add "Alabama" to items to make it initially valid:

data () {
    return {
      loading: false,
      items: ['Alabama'], // <- add the default here
      search: null,
      select: 'Alabama',
      states: [ ...

edited Feb 1, 2020 at 21:16

answered Oct 28, 2019 at 11:08

chris

16.5k9 gold badges40 silver badges41 bronze badges

1 Comment

João Eudes Lima Over a year ago

This works, but there's no reason to be "forced" to add such an item to the item list

Pradeep Nooney · Accepted Answer · 2021-07-08 17:39:35Z

5

you can also use auto-select-first attribute along with default value in data.

   <v-autocomplete
          v-model="selectedItem"
          auto-select-first
          :items="items">
   </v-autocomplete>

  data() {
    return {
      items: ['Default'],
      selectedItem: "Default",
    }
}

answered Jul 8, 2021 at 17:39

Pradeep Nooney

83012 silver badges12 bronze badges

Comments

shahar · Accepted Answer · 2020-01-23 12:31:57Z

2

I ran into the same problem, And finally figured it out Use item-text and item-value to show the items And init the v-model with the key Of the item you want to display

answered Jan 23, 2020 at 12:31

shahar

871 silver badge5 bronze badges

Collectives™ on Stack Overflow

Vuetify autocomplete - how to pass default value?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related