Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Autocompletes
We use the v-autocomplete component to lets us add a autocomplete input to our app.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-card color="red lighten-2" dark>
<v-card-text>
<v-autocomplete
v-model="model"
:items="items"
:loading="isLoading"
:search-input.sync="search"
color="white"
hide-no-data
hide-selected
item-text="Description"
item-value="API"
label="Public APIs"
placeholder="Start typing to Search"
prepend-icon="mdi-database-search"
return-object
></v-autocomplete>
</v-card-text>
<v-divider></v-divider>
<v-expand-transition>
<v-list v-if="model" class="red lighten-3">
<v-list-item v-for="(field, i) in fields" :key="i">
<v-list-item-content>
<v-list-item-title v-text="field.value"></v-list-item-title>
<v-list-item-subtitle v-text="field.key"></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-expand-transition>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn :disabled="!model" color="grey darken-3" @click="model = null">
Clear
<v-icon right>mdi-close-circle</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
descriptionLimit: 60,
entries: [],
isLoading: false,
model: null,
search: null,
}),
computed: {
fields() {
if (!this.model) return [];
return Object.keys(this.model).map((key) => {
return {
key,
value: this.model[key],
};
});
},
items() {
return this.entries.map((entry) => {
const Description = entry.Description.slice(0, this.descriptionLimit);
return Object.assign({}, entry, { Description });
});
},
},
watch: {
search(val) {
if (this.items.length > 0) return;
if (this.isLoading) return;
this.isLoading = true;
fetch("https://api.publicapis.org/entries")
.then((res) => res.json())
.then((res) => {
const { count, entries } = res;
this.count = count;
this.entries = entries;
})
.catch((err) => {
console.log(err);
})
.finally(() => (this.isLoading = false));
},
},
};
</script>
We add the v-autocomplete component.
v-model has the model.
loading prop has the loading state.
color sets the text color.
hide-no-data means that we don’t hide any data.
hide-selected means we hide the selected item.
item-text is the property of the description.
item-value is the property of the items.
label is the input label.
placeholder has the input placeholder.
prepend-icon is the icon name to add to the item.
return-object returns the result as objects.
The v-list has the items to show and show the results.
The search watcher fetches the data as the search value changes.
search changes when we type.
The fields computed property is what we render as the search results.
items has the selected items.
Conclusion
We can add an autocomplete input with the v-autocomplete component.
