Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Chip Groups
We can group chips together with the v-chip-group component.
For example, we can write:
<template>
<v-container class="grey lighten-5">
<v-row>
<v-col>
<v-sheet elevation="10" class="pa-4">
<v-chip-group column active-class="primary--text">
<v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
</v-chip-group>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
tags: ["mango", "apple", "orange", "pear", "grape"],
}),
};
</script>
We put the v-chip components in the v-chip-group component.
Mandatory
We can add the mandatory prop so that there’s a value selected.
For example, we can write:
<template>
<v-container class="grey lighten-5">
<v-row>
<v-col>
<v-sheet elevation="10" class="py-4 px-1">
<v-chip-group mandatory active-class="primary--text">
<v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
</v-chip-group>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
tags: ["mango", "apple", "orange", "pear", "grape"],
}),
};
</script>
We put the mandatory prop on the v-chip-group component.
Multiple
The multiple prop lets us select multiple chips.
For instance, we can write:
<template>
<v-container class="grey lighten-5">
<v-row>
<v-col>
<v-sheet elevation="10" class="py-4 px-1">
<v-chip-group multiple active-class="primary--text">
<v-chip v-for="tag in tags" :key="tag">{{ tag }}</v-chip>
</v-chip-group>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
tags: ["mango", "apple", "orange", "pear", "grape"],
}),
};
</script>
then we can select multiple chips.
Filter Results
Chips can have additional feedback with the filter prop.
For example, we can write:
<template>
<v-container class="grey lighten-5">
<v-row>
<v-col>
<v-card class="mx-auto" max-width="400">
<v-card-text>
<h2 class="title mb-2">Choose fruits</h2>
<v-chip-group v-model="fruits" column multiple>
<v-chip filter outlined>apple</v-chip>
<v-chip filter outlined>orange</v-chip>
<v-chip filter outlined>grape</v-chip>
</v-chip-group>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
fruits: [],
}),
};
</script>
to add chips that show a checkmark when it’s chosen.
v-model will bind the selected items to the model.
filter is what makes the checkmark shown.
outlined makes the chip displayed with a white background when it’s not selected.
Conclusion
We can add chip groups to show a group of chips that we can select.
