Javascript vuetify的v-select组件中的搜索栏
我正在使用vuetify的v-select组件。我正在尝试在下拉列表中添加搜索栏选项 我有什么内在的方法可以做到这一点吗。我使用的是vuetify 1.0.5版Javascript vuetify的v-select组件中的搜索栏,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我正在使用vuetify的v-select组件。我正在尝试在下拉列表中添加搜索栏选项 我有什么内在的方法可以做到这一点吗。我使用的是vuetify 1.0.5版 <v-select :items="users" attach item-text='name' item-value='name' v-model="association.name" :rules='nameRule' label="First Na
<v-select
:items="users"
attach
item-text='name'
item-value='name'
v-model="association.name"
:rules='nameRule'
label="First Name"
required>
</v-select>
您需要添加一个模板槽并编写自定义搜索逻辑。我已经为同样的代码创建了一个代码笔。请根据你的需要修改一下
<template v-slot:prepend-item>
<v-list-item>
<v-list-item-content>
<v-text-field v-model="searchTerm" placeholder="Search" @input="searchFruits"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
// method
searchFruits (e) {
if (!this.searchTerm) {
this.fruits = this.fruitsCopy;
}
this.fruits = this.fruitsCopy.filter(fruit => {
return fruit.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1
})
}
听起来你在找
Vuetify 1.0.5似乎非常过时当前版本:1.5.24/2.2.20,如果可以,您应该进行更新。这是一个好主意,但带来了巨大的不便:搜索栏将与其余项目一起滚动。使用prepend项目槽只会在所有其他项目之前实现一个额外的项目,您可以清楚地设置其样式或执行不同的操作,但它是,并且它将仍然是一个项目。为了使搜索栏具有固定的标题,并且项目能够在其下滚动,您必须将其从项目流中删除。不幸的是,它似乎不存在一个简单的方法来做到这一点。