Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Closable Chips
We can create a closable chop with the v-model directive.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip
v-if="chip"
class="ma-2"
close
color="green"
outlined
@click:close="chip = false"
>Success</v-chip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
chip: true,
}),
};
</script>
We listen to the click:close event with to set chip to false .
The v-if directive controls whether the chip is displayed.
Action Chips
We can have chips that do something when we click it.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-chip @click="blinds">
<v-icon left>mdi-blinds</v-icon>Close blinds
</v-chip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
methods: {
blinds() {
alert("Toggling Blinds");
},
},
};
</script>
We listen to the click event by setting the click handler top the blinds method.
Then we run the method when we click it.
Chips In Selects
We can use chips in a select element to display selected data.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-combobox
v-model="chips"
:items="items"
chips
clearable
label="Your favorite hobbies"
multiple
solo
>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
v-bind="attrs"
:input-value="selected"
close
@click="select"
@click:close="remove(item)"
>{{ item }}</v-chip>
</template>
</v-combobox>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
chips: ["eat", "drink", "sleep"],
items: ["walk", "read"],
}),
methods: {
remove(item) {
this.chips.splice(this.chips.indexOf(item), 1);
this.chips = [...this.chips];
},
},
};
</script>
We listen to the click event to run the select method provided by the selection slot of the v-combobox component.
v-combobox is the dropdown component.
Also, we listen to the click:close event to remove an item when we click on the ‘x’ on the chip.
Custom Lists
We can use chips in a custom list.
To do that, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-card class="mx-auto" max-width="500">
<v-container class="py-0">
<v-row align="center" justify="start">
<v-col v-for="(selection, i) in selections" :key="selection.text" class="shrink">
<v-chip :disabled="loading" close @click:close="selected.splice(i, 1)">
<v-icon left v-text="selection.icon"></v-icon>
{{ selection.text }}
</v-chip>
</v-col>
<v-col v-if="!allSelected" cols="12">
<v-text-field
ref="search"
v-model="search"
full-width
hide-details
label="Search"
single-line
></v-text-field>
</v-col>
</v-row>
</v-container>
<v-divider v-if="!allSelected"></v-divider>
<v-list>
<template v-for="item in categories">
<v-list-item
v-if="!selected.includes(item)"
:key="item.text"
:disabled="loading"
@click="selected.push(item)"
>
<v-list-item-avatar>
<v-icon :disabled="loading" v-text="item.icon"></v-icon>
</v-list-item-avatar>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item>
</template>
</v-list>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
:disabled="!selected.length"
:loading="loading"
color="purple"
text
@click="next"
>Next</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
text: "nature",
icon: "mdi-nature",
},
{
text: "wine",
icon: "mdi-glass-wine",
},
{
text: "calendar",
icon: "mdi-calendar-range",
},
],
loading: false,
search: "",
selected: [],
}),
computed: {
allSelected() {
return this.selected.length === this.items.length;
},
categories() {
const search = this.search.toLowerCase();
if (!search) return this.items;
return this.items.filter((item) => {
const text = item.text.toLowerCase();
return text.indexOf(search) > -1;
});
},
selections() {
const selections = [];
for (const selection of this.selected) {
selections.push(selection);
}
return selections;
},
},
watch: {
selected() {
this.search = "";
},
},
methods: {
next() {
this.loading = true;
setTimeout(() => {
this.search = "";
this.selected = [];
this.loading = false;
}, 2000);
},
},
};
</script>
We put the v-chip component within the v-col to lay them out when we select items from the v-text-field .
The v-text-field lets us enter some text and the v-list below it will show the items that match what we type.
The categories is a computed property to return the matches.
Conclusion
We can add chips to do different things.
They can also be in dropdowns.
