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 plete code on codepen here

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 plete code on codepen here

• javascript
• vue.js
• drop-down-menu
• vuetify.js

• Please see v-autoplete, items an be an array of objects or array of strings, but your sample uses numbers. – Richard Matsen Commented Mar 5, 2020 at 20:43
• @RichardMatsen If we use string the same thing happens, – PRAJIN PRAKASH Commented Mar 6, 2020 at 1:20

3 Answers 3

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 putedItems 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 putedItems from cropping. But keep in mind that this may lead to minor visual changes to v-select ponent. Besides, all of your items will be loaded immediately in v-select ponent and opening of the ponent may take longer than usual.

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

in [email protected]

:menu-props="{ auto: true }"

worked also