I am using vuetify's v-select component. 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.
<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.
Vuetify 1.0.5 seems extremely out of date (current version: 1.5.24 / 2.2.20), you should update if you can.
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
})
}