vuetifyjs selects with 'hide-selected=true' show only listing first 20 items

Question

vuetify selects only showing first 20 items from the list if we set hide-selected=true,

  <v-select
        v-bind:items="test_data"
        v-model="test_modal"
        label="Reader permissions"
        multiple
        chips
        deletable-chips
        :counter="test_data.length"
         hide-selected

  ></v-select>

see complete code on codepen here

Answer 1

You can also increase the lastItem property of VSelect, which controls the length of the virtual list and is initially set to 20.

(Note, the properties of VSelect may change over versions)

Add a ref to the select

<v-select
    ref="select"
    v-bind:items="test_data"
    v-model="test_modal"
    label="Reader permissions"
    multiple
    chips
    deletable-chips
    :counter="test_data.length"
     hide-selected
></v-select>

Change the value of lastItem in mounted()

mounted() {
  this.$refs.select.lastItem = 200;
},