Vuetify Autocomplete, item-slot , keep the highlighting of character

Question

How would one keep the default highlighting of characters ones you replace the scoped-slot of the item.

https://vuetifyjs.com/en/components/autocompletes#scopedSlots

Default , will output a v-list where every character from the input is "higlighted" in the output.

<v-autocomplete
                    v-model="model"
                    :items="items"
                    :loading="isLoading"
                    :search-input.sync="SomeApiDataCall"
                    item-text="name"
                    item-value="id"
                   >

            </v-autocomplete>

Custom scoped-slot : I want to change the design of the list , but would like to keep the "highlighted" output

    <v-autocomplete
                            v-model="model"
                            :items="items"
                            :loading="isLoading"
                            :search-input.sync="SomeApiDataCall"
                            item-text="name"
                            item-value="id"
                           >

        <template  slot="item"
                   slot-scope="{ item, tile }"
         >   
            <v-list-tile-content  >
                 <!--the html output needs to be highlighted-->  
                <v-list-tile-title v-html="item.name"></v-list-tile-title>
            </v-list-tile-content>

         </template>

</v-autocomplete>

VAutocomplete imports > VSelect, imports > VSelectList

VSelectList has a function called genFilteredText

https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VSelect/VSelectList.js#L112

That will do what I want. How would one implement this in the custom scoped-slot ?

Thanks.

score 10 · Accepted Answer · edited Dec 04 '19 at 23:24

The slot-scope Item can also receive the "parent". After that you can access any methods on it.

<template
    slot="item"
    slot-scope="{ parent, item, tile }"
>
    <v-list-tile-content>
        <!-- Highlight output item.name -->  
        <v-list-tile-title
            v-html="parent.genFilteredText(item.name)"
        > 
        </v-list-tile-title>
    </v-list-tile-content>
</template>

score 7 · Answer 2 · answered Dec 02 '19 at 23:41

I am quite new to vue and it took me a while to translate this question/solution into the new Slots syntax.

For anyone that is also using the new v-slot:item="data" syntax, you can receive the parent as follows:

<template v-slot:item="{ parent, item }">
    <v-list-tile-content  >
         <!--Highlight output item.name-->  
         <v-list-tile-title 
              v-html="`${parent.genFilteredText(item.name)}`"
         ></v-list-tile-title>
    </v-list-tile-content>
</template>

Vuetify Autocomplete, item-slot , keep the highlighting of character

2 Answers2