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

user_2661479 0
Viewed 3696

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

vuetify.js vue.js drop-down-menu javascript
2 Answers

Possibly that's a bug in vuetify, and I see you're already opened issue on github :)

I think this bug is related to internal virtualizedItems and computedItems properties in vuetify's VSelect class.

Computeditems is an array of items that always cropped to 20 items by default and then 20 more items is added, by example, when you scroll your selectbox. Currently (at least in vuetify 2.2.15) there's no way to manipulate with count of added items.

There's a quick fix of your problem - just add menuProps="auto" to your v-select. It prevents computedItems from cropping. But keep in mind that this may lead to minor visual changes to v-select component. Besides, all of your items will be loaded immediately in v-select component and opening of the component may take longer than usual.

user_92752240

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;
},
user_47162450
Related