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

【问题标题】：Get searched results of vuetify's v-autocomplete获取 vuetify 的 v-autocomplete 的搜索结果
【发布时间】：2019-10-25 14:39:34
【问题描述】：

查看此代码笔：

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 的文档没有提到任何公开这个过滤列表的道具。有谁知道我如何在我的代码中获取该列表？

提前谢谢你:)

【问题讨论】：

标签： vuejs2 vuetify.js

【解决方案1】：

VAutocomplete 将其存储在 filteredItems 属性中。

你使用了 ref <v-autocomplete ref="selectExample" 所以你可以像这样访问它：

this.$refs.selectExample.filteredItems

【讨论】：