v-select vuetify max elements count

Question

It seems that v-select shows only 20 elements from the array even though array (persons) has 22 of them but if I use autocomplete I can see those 2 missing persons in the list so they are actually not shown until I start to look for the using autocomplete. The code is as follows:

<v-select
  :items="persons"
  v-model="model.persons"
  label="Persons:"
  item-text="name"
  item-value="id"
  multiple
  chips
  max-height="auto"
  autocomplete
>
  <template slot="selection" slot-scope="data">
    <v-chip
      :selected="data.selected"
      :key="JSON.stringify(data.item)"
      close
      class="chip--select-multi"
      @input="data.parent.selectItem(data.item)"
    >
       {{ data.item.name }}
    </v-chip>
  </template>
  <template slot="item" slot-scope="data">
    <template v-if="typeof data.item !== 'object'">
      <v-list-tile-content v-text="data.item"></v-list-tile-content>
    </template>
    <template v-else>                       
      <v-list-tile-content>
        <v-list-tile-title v-html="data.item.name"></v-list-tile-title>
      </v-list-tile-content>
    </template>
  </template>
</v-select>

Is there any v-select option to use to increase that number?

Your `v-select` will show all 22 entries. You have to scroll down to see all of the entries though. There is an issue for this on the [Vuetify Github](https://github.com/vuetifyjs/vuetify/issues/2660). Seems as if there is no neat solution to disable this behavior as of now. — discolor, Jan 19 '20 at 06:54
Definitely and issue. I have a `v-select` with 50 items and it only shows 20 — Avraham, Feb 06 '20 at 21:42
I had the same issue. Fixed by upgrading Vuetify to the lastest version (currently 2.2.28) — shino47, May 14 '20 at 02:51
Is there a setting to display more elements so that the user do not have to scroll the list? My users do not notice that the v-select is scrollable. So they do not see the hidden-unless-scrolled elements. — oivind, Apr 01 '21 at 08:56

score 5 · Answer 1 · answered Feb 10 '20 at 16:45

5

Passing the menu-props="auto" prop to v-select fixes the issue.

<v-select
  ...
  menu-props="auto"
>

answered Feb 10 '20 at 16:45

Avraham

916
1
13
25

score 0 · Answer 2 · answered Feb 14 '23 at 01:36

tldr; Vuetify v1.5 v-select has a built in virtual list that will only render the first 20 items in the list until the user scrolls. If you make your max height big enough that all 20 items show - you can't get it to add the others to the list as there is no scroll.

v-select for Vuetify v1 will try to append more items to the drop down list dynamically. It however only does this if you override the menu-props and don't pass "auto"

It then tries to calculate when you are within 200px of the bottom of the list while scrolling. Then it will add another 20 to the virtual list every time that happens.

This really doesn't work if you are trying to do a tall list that takes up most of the page as the 20 items won't show a scroll bar because maxHeight is greater than the 20 shown. They just needed to give a way to override the virtual behavior or detect on render to add another 20.

My fix is to not use maxHeight above 50% to ensure if I get a list of >20 items, it will have to scroll, allowing the add more to the virtual list logic to kick in.

This is extra frustrating to debug as the virtual list can kick in - incrementing lastItem to 40 - and you think you have fixed the issue. But then on reload you notice the list only has 20 items in it again. Sometimes the only way to solve something maddening like this is to look at the source code.

From VSelect.js on v1-stable branch:

// This creates the virtual list only if auto isn't passed
// this.lastItem is defined as 20 initially
virtualizedItems () {
  return this.$_menuProps.auto
    ? this.computedItems
    : this.computedItems.slice(0, this.lastItem)
},


 // Logic to increment this.lastItem to show more items that
 // can't get hit if there is no scrolling to be had!
 onScroll () {
  if (!this.isMenuActive) {
    requestAnimationFrame(() => (this.content.scrollTop = 0))
  } else {
    if (this.lastItem >= this.computedItems.length) return

    const showMoreItems = (
      this.content.scrollHeight -
      (this.content.scrollTop +
      this.content.clientHeight)
    ) < 200

    if (showMoreItems) {
      this.lastItem += 20
    }
  }
},

v-select vuetify max elements count

2 Answers2