web-dev-qa-db-fra.com

Vuetify Autocomplège - Comment réussir la valeur par défaut?

J'utilise le composant Vuefiny Autocomplete et je souhaite qu'il affiche une valeur par défaut dans son champ de saisie.

J'ai essayé de passer juste de la valeur en tant que champ et changement de champ modèle V sur n'importe quelle chaîne, mais cela ne fonctionne pas - un champ de saisie est vide que si je choisis la valeur Formulaire de valeur La liste

Exemple officiel de Vuetify

<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)
    }
  }
})
vue.jsvuetify.js
4
Kira

J'ai couru dans cela et ce que j'ai fait était passant au modèle V, l'élément à la position de l'index 0 de la liste:

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

J'ai rencontré le même problème et j'ai finalement compris l'utilisation d'élément-texte et de valeur d'élément pour afficher les éléments et init le modèle V avec la clé de l'élément que vous souhaitez afficher.

1
shahar

Je pense que vous devriez utiliser v-combobox à la place de v-autocomplete.

Avec Combobox, vous pouvez permettre à un utilisateur de créer de nouvelles valeurs pouvant ne pas être présentes dans une liste d'éléments fournie.

Voir l'exemple de la différence entre eux ici .

1
User 28