我发送的数组值为1—100的v—自动完成项目props .但在滚动条上只有数字,直到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不显示.<>

推荐答案

我在vutify文档中查看了一下,在v-AutoComplete的项目插槽部分,它写道: "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."

所以我想你需要绑定props 到你的插槽.这显示了最多100个项目.

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

Playground

Javascript相关问答推荐

当promise 在拒绝处理程序被锁定之前被拒绝时,为什么我们会得到未捕获的错误?

基于变量切换隐藏文本

为什么当我解析一个promise时,输出处于挂起状态?

在grafana情节,避免冲突的情节和传说

如何让npx在windows中运行js脚本?

如何根据当前打开的BottomTab Screeb动态加载React组件?

Chart.js-显示值应该在其中的引用区域

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

JavaScript不重定向配置的PATH

Next.js无法从外部本地主机获取图像

Pevent触发material 用户界面数据网格中的自动保存

无法使用npm install安装react-dom、react和next

如何正确地在ComponentWillUnmount中卸载状态以避免内存泄漏?

固定动态、self 调整的优先级队列

脚本语法错误只是一个字符串,而不是一个对象?

使用props 将VUE 3组件导入JS文件

REACT-本机错误:错误类型错误:无法读取未定义的容器的属性

react :图表负片区域不同 colored颜色

使用重新 Select 和对象理解 Select 器备忘

对象作为react 子对象无效(已找到:具有键的对象{type,props}).如果要呈现一个子级集合,请改用数组