Question

请参阅此codepen：

https://codepen.io/anon/pen/gNOGmY?editors=1010

// HTML
<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-title class="headline font-weight-regular blue-grey white--text">Profile</v-card-title>
      <v-card-text>
        {{ searchedItems }}
        <v-subheader class="pa-0">Where do you live?</v-subheader>
        <v-autocomplete
          v-model="model"
          :items="states"
          :label="State"
          :search-input.sync="filter"
          ref="selectExample"
        >
        </v-autocomplete>
      </v-card-text>
    </v-card>
  </v-app>
</div>

// JS
new Vue({
  el: '#app',
  data () {
    return {
      model: null,
      filter: '',
      searchedItems: [],
      states: [
        'Alabama', 'Alaska', 'American Samoa', 'Arizona',
        'Arkansas', 'California', 'Colorado', 'Connecticut',
        'Delaware', 'District of Columbia', 'Federated States of Micronesia',
        'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
        'Missouri', 'Montana', 'Nebraska', 'Nevada',
        'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
        'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
        'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ]
    }
  },
  watch:{
    filter(newVal){
      // I want to get the filtered items list here
      this.searchedItems = this.$refs['selectExample'].items
    }
  }
})

我的用例是，当用户在自动完成输入框中输入内容时，下拉列表中会过滤掉项目列表，而我想使用过滤后的项目。

Vuetify的文档未提及任何公开此过滤列表的道具。有谁知道我如何在我的代码中获取该列表？

预先感谢您：）

Answer 1

VAutocomplete将其存储在filteredItems属性中。

您使用了引用<v-autocomplete ref="selectExample"，因此您可以像这样访问它：

this.$refs.selectExample.filteredItems

获取vuetify的v-autocomplete的搜索结果

1 个答案: