How to Customize the Vuetify AutoComplete
Well, this is not going to be a long article but rather a simple html snippet about how one can customize their v-autocomplete component. The final result will look like the code below.
To achieve this, one can easily use slots. For this we will use the selection and the item slots. To achieve this color coding, we will use the v-list-item-avatar component inside each item in our v-autocomplete component.
I will assume that you know enough about creating v-autocompletes, vue bindings and adding items to the v-autocomplete so I will pass that for now.
Please note though that each object in your list of items needs a text property and a color property, to be bound to item-text and item-color respectively. These will refer to the color and the text in each item of your array of objects, passed to the v-autocomplete via the “items” attribute binding.
Reproduction
The selection portion of the v-autocomplete is made up of this definition:
This in essence overwrites the complete selection slot for the v-autocomplete with new content. The selection is made up of a size 16 avatar which has a border and its color is bound to the color of each object. After the avatar we display the “text” of each of the object in the :items using the moustache {{ }} binding methodology.
Whilst the item slot follows the same outline, we have expanded on it a little bit and added the v-list-item-content component to show the text. This is depicted below.
Using v-html in the title in this case enables us to pass HTML tags to our object.text values, unlike the {{ }} used in the selection slot. This can be <i> or <b> etc, to make the content italic and bold.
Here is the complete HTML snippet.
https://github.dev/Mashiane/My-Vuetify-Code-Snippets/blob/main/v-autocomplete-01.txt
You can find more information about the Vuetify 2 v-autocomplete component here.
You can follow me on Twitter @mashymbanga, LinkedIn (https://www.linkedin.com/in/anele-mashy-mbanga-4b639376/), on Github (https://github.com/Mashiane)
Happy Vuetify Coding.
