2
votes

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?

1
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. Seems as if there is no neat solution to disable this behavior as of now. - discolor
Definitely and issue. I have a v-select with 50 items and it only shows 20 - Avraham
I had the same issue. Fixed by upgrading Vuetify to the lastest version (currently 2.2.28) - shino47
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

1 Answers

5
votes

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

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