vuejs2vuetify.jsselectallv-autocomplete

Vue2 Vuetify v-autocomplete: How do I get the searched result/filtered item of v-autocomplete

I implement searching/filtering within v-autocomplete with multiple selection and select all. Currently select all will select all from the list which include filtered/un-filtered (screenshot: 67 item(s) selected although it has been filtered to 4). I need that select all to just select those 4 items (yellow box).

what_happened_currently

Question is how do I get/access the v-autocomplete's filtered items?

Saw a post which asked almost same question as mine, but no answer from 2019. Someone mentioned to use

this.$refs.autoCompleteRef.filteredItems

But its not working.

Solution

  • It works exactly as mentioned.

    See the playground. It's better to check it in full-page mode.

    new Vue({
  vuetify: new Vuetify(),
  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() {
      this.searchedItems = this.$refs['selectExample']?.filteredItems
    }
  }
})
    #app { line-height: 3; }
[v-cloak] { display: none; }
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<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: {{ 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>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>