Question

我正在使用Vuetify自动完成组件，希望它在其输入字段中显示默认值

我试图仅将值作为prop传递，并将v-model字段更改为任何字符串，但是它不起作用-除非我从列表中选择值，否则输入字段为空

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

Answer 1

由于在v-autocomplete中找到了“阿拉巴马州”，因此items组件将不会显示“阿拉巴马州”。您需要做的就是在items上添加“阿拉巴马州”以使其最初有效：

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

Answer 2

我认为您应该使用v-combobox而不是v-autocomplete。

使用组合框，您可以允许用户创建可能不会创建的新值出现在提供的物品清单中。

请参阅示例here。

Answer 3

我遇到了同样的问题，终于想通了使用项目文本和项目值显示项目然后使用键初始化v模型您要显示的项目中

Answer 4

您还可以使用 auto-select-first 属性以及数据中的默认值。

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

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

Vuetify自动完成-如何传递默认值？

4 个答案: