CODEWITHSUNDEEP
vue.jsvuetify.jsv-select
user2620644
user2620644

Reputation: 521

v-select vuetify max elements count

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?

Upvotes: 4

Views: 5649

Answers (2)

Joseph Connolly
Joseph Connolly

Reputation: 945

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

Upvotes: 1

Avraham
Avraham

Reputation: 968

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

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

Upvotes: 5

Related Questions