Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – v-autocomplete not showing all the item in selection list from list

I am sending array which has value from 1-100 on v-autocomplete item props. But on scrollbar only number till 40-50 shows up.

<template>
  <v-app>
    <v-container>
      <v-autocomplete
        label="Autocomplete"
        :items="CountList"
        variant="outlined"
      >
        <template #item="{ item }">
          <v-list-item>{{ item.raw }}</v-list-item>
        </template>
      </v-autocomplete>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, inject } from 'vue'
  const CountList = ref([])
  for (let i = 1; i <= 100; i++) {
    CountList.value.push(i)
  }
</script>

In dwopdown list number till 100 should showup. But when I use <template #item> complete number till 100 doesn’t show up.

Tags:

2

Answers


  1. 0

    I took a look in vuetify docs and in the item slot section of v-autocomplete it says:
    "Define a custom item appearance. The root element of this slot must be a v-list-item with v-bind="props" applied. props includes everything required for the default select list behaviour – including title, value, click handlers, virtual scrolling, and anything else that has been added with item-props."

    So i guess you need to bind props to your slot. This shows all the items up to 100.

    <template #item="{ props, item }">
  <v-list-item v-bind="props" :title="item.raw"/>
</template>

    Playground

    Login or Signup to reply.
  2. 0

    You can add the item-title property as follows:

    <v-autocomplete
  label="Autocomplete"
  :items="CountList"
  variant="outlined"
  :item-title="item => item"
>
</v-autocomplete>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search