I'm using vuetify's v-autocomplete component, and I'd like to add custom part to its dropdown (marked with red arrow on this screenshot: https://prnt.sc/lm3vjc)
This is how my component looks like, so I'd like to add that part on top of items:
<v-autocomplete @change='selectedSearchedCandidate' append-icon="search" :loading="loading" :filter="v => v" :items="items" :search-input.sync="search" v-model="select" flat hide-no-data hide-details return-object placeholder="Search candidates">
<template slot="selection" slot-scope="{ item, selected }">
{{item.firstName}} {{item.lastName}}
</template>
<template slot="item" slot-scope="{ item, tile }">
<v-list-tile-content>
<p class='fullName'>{{item.firstName}} {{item.lastName}}</p>
<p class='employer'>{{item.employer}}</p>
<p class='phoneNumber grey--text'>{{formattedPhoneNumber(item.phoneNumber)}}</p>
</v-list-tile-content>
</template>
</v-autocomplete>
You can use prepend-item
slot. It will add, before the first item, whatever you want.
With your exemple, it should looks like this :
<v-autocomplete @change='selectedSearchedCandidate' append-icon="search" :loading="loading" :filter="v => v" :items="items" :search-input.sync="search" v-model="select" flat hide-no-data hide-details return-object placeholder="Search candidates">
<v-list-tile
slot="prepend-item"
class="grey--text">
{{ items.length }} candidates found
</v-list-tile>
<template slot="selection" slot-scope="{ item, selected }">
{{item.firstName}} {{item.lastName}}
</template>
<template slot="item" slot-scope="{ item, tile }">
<v-list-tile-content>
<p class='fullName'>{{item.firstName}} {{item.lastName}}</p>
<p class='employer'>{{item.employer}}</p>
<p class='phoneNumber grey--text'>{{formattedPhoneNumber(item.phoneNumber)}}</p>
</v-list-tile-content>
</template>
</v-autocomplete>
Prepend and Append slot in Vuetify Documentation
Edit for V1.1.0+ : Those slots are available in v-autocomplete
and v-combobox
as they inherit from v-select
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With