Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

add custom part to v-autocomplete dropdown

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>
like image 432
kecman Avatar asked Nov 23 '18 16:11

kecman


1 Answers

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.

like image 70
Toodoo Avatar answered Oct 12 '22 18:10

Toodoo