[英]Search bar in vuetify's v-select component
I am using vuetify's v-select component.我正在使用 vuetify 的 v-select 组件。 I am trying to add a search bar option in the dropdown.
我正在尝试在下拉列表中添加搜索栏选项。
Is there any inbuilt way I can do that.有什么内置的方法可以做到这一点。 I am using vuetify version 1.0.5.
我正在使用 vuetify 1.0.5 版。
<v-select
:items="users"
attach
item-text='name'
item-value='name'
v-model="association.name"
:rules='nameRule'
label="First Name"
required>
</v-select>
Sounds like you're looking for v-autocomplete
.听起来您正在寻找
v-autocomplete
。
Vuetify 1.0.5 seems extremely out of date (current version: 1.5.24 / 2.2.20), you should update if you can. Vuetify 1.0.5 似乎非常过时(当前版本:1.5.24 / 2.2.20),如果可以的话,你应该更新。
You would need to add a template slot and write custom search logic.您需要添加一个模板槽并编写自定义搜索逻辑。 I have created a code pen for the same.
我为此创建了一个代码笔。 Please alter it to your needs.
请根据您的需要进行更改。
<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
})
}
https://codepen.io/sudheer-ranga/pen/bGVbjbx https://codepen.io/sudheer-ranga/pen/bGVbjbx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.