Получите результаты поиска v-autocomplete vuetify - PullRequest
0 голосов
/ 11 июня 2019

См. Этот код:

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 не упоминается ни одной опоры, раскрывающей этот отфильтрованный список. Кто-нибудь знает, как я могу получить этот список в моем коде?

Заранее спасибо:)

1 Ответ

1 голос
/ 11 июня 2019

VAutocomplete сохраняет его в свойстве filteredItems.

Вы использовали ref <v-autocomplete ref="selectExample", поэтому вы можете получить к нему доступ так:

this.$refs.selectExample.filteredItems
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...