我想知道如何将链接附加到 Vuetify 自动完成中的项目。我想这样做,以便它可以充当搜索栏。截至目前,我可以将链接附加到 v-list-item 但该链接不会覆盖容器的整个宽度。它似乎只是围绕文本而不是整个项目形成一个链接。我试图包装整个组件,但这似乎也不起作用。我也试过查看文档( https://vuetifyjs.com/en/components/autocompletes/ ),但我似乎也找不到关于在那里制作项目链接的任何内容。提前感谢您的任何帮助。
<v-autocomplete
v-model="model"
:items="users"
:loading="isLoading"
:search-input.sync="search"
clearable
hide-details
hide-selected
item-text="username"
item-value="symbol"
placeholder="Search"
flat
solo
dense
>
<template v-slot:item="{ item }">
<v-list>
<v-list-item-group v-model="item">
<v-list-item-content>
<v-list-item link :to="'users/' + item.id">
{{item.username}}
</v-list-item>
</v-list-item-content>
</v-list-item-group>
</v-list>
</template>
</v-autocomplete>
最佳答案
物品栏位应该是 <v-list-item/>
仅因为这些项目槽的包装元素是 <v-list/>
已经默认了。
<v-autocomplete
...
>
<template v-slot:item="{ item }">
<v-list-item link :to="'users/' + item.id">{{item.username}}</v-list-item>
</template>
</v-autocomplete>
这是一个 demo .
关于vue.js - Vuetify 自动完成链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63947473/