Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Multiple Selection Dropdown
We can add a multiple selection dropdown with the multiple prop.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-select v-model="fruit" :items="items" menu-props="auto" label="Select" multiple></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: ["apple", "orange", "pear"],
fruit: "",
}),
};
</script>
Now the dropdown will have a checkbox to let us select the items.
The selected items can be displayed as chips with the chips prop:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-select v-model="fruit" :items="items" menu-props="auto" label="Select" multiple chips></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: ["apple", "orange", "pear"],
fruit: "",
}),
};
</script>
Dense Dropdown
The dense prop lets us shrink the height of the dropdown.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-select v-model="fruit" :items="items" menu-props="auto" label="Select" dense></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: ["apple", "orange", "pear"],
fruit: "",
}),
};
</script>
to add the dropdown with a shorter height.
Customized Item Text and Value
The item can be customized with different text and value.
To customize it, we can use the return-object prop.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-select
v-model="select"
:items="items"
menu-props="auto"
label="State"
return-object
:hint="`${select.state}, ${select.abbr}`"
item-text="state"
item-value="abbr"
></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ state: "Florida", abbr: "FL" },
{ state: "Georgia", abbr: "GA" },
{ state: "Nebraska", abbr: "NE" },
{ state: "South Dakota", abbr: "SD" },
{ state: "New York", abbr: "NY" },
],
select: "",
}),
};
</script>
We have the return-object prop with the item-text and item-value props.
item-text is the key of the selected item.
item-value is the key of the selected item’s value we want to set as the value of the v-model .
We can get both values as we did in value of the hint prop.
Custom Menu Props
We can set the menu-props prop with custom options.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-select :items="items" :menu-props="{ top: true, offsetY: true }" label="Label"></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: ["apple", "orange", "pear"],
select: "",
}),
};
</script>
We set the top property to true to make the dropdown drop up instead of down.
offsetY makes it shift its position higher.
Conclusion
We can add dropdowns with various options with Vuetify.
