我正在发送 v-autocomplete 项目属性上值为 1-100 的数组。但滚动条上只显示 40-50 之前的数字。
<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>
在 dwopdown 列表中应该显示直到 100 的数字。但是当我使用 时,直到 100 为止都不会显示完整的数字。
我查看了 vuetify 文档,在 v-autocomplete 的项目槽部分中它说:
“定义自定义项目外观。此插槽的根元素必须是应用了 v-bind="props" 的 v-list-item。props 包含默认选择列表行为所需的所有内容 - 包括标题、值、单击处理程序、虚拟滚动以及使用 item-props 添加的任何其他内容。” 所以我想你需要将道具绑定到你的插槽上。这显示了 100 以内的所有项目。 您可以添加 item-title 属性,如下所示:<template #item="{ props, item }">
<v-list-item v-bind="props" :title="item.raw"/>
</template>
<v-autocomplete
label="Autocomplete"
:items="CountList"
variant="outlined"
:item-title="item => item"
>
</v-autocomplete>
我查看了 vuetify 文档,在 v-autocomplete 的项目槽部分中它说: “定义自定义项目外观。此插槽的根元素必须是应用了 v-bind="props" 的 v-list-item。props 包含默认选择列表行为所需的所有内容 - 包括标题、值、单击处理程序、虚拟滚动以及使用 item-props 添加的任何其他内容。”
所以我想你需要将道具绑定到你的插槽上。这显示了 100 以内的所有项目。
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="item.raw"/>
</template>
您可以添加 item-title 属性,如下所示:
<v-autocomplete
label="Autocomplete"
:items="CountList"
variant="outlined"
:item-title="item => item"
>
</v-autocomplete>