Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Combobox No Data with Chips
We can add a combobox with chips that have no data in it.
To do that, we can populate the no-data slot to provide the context to the user when searching or creating items.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-combobox
v-model="model"
:items="items"
:search-input.sync="search"
hide-selected
hint="Maximum of 5 tags"
label="Add some tags"
multiple
persistent-hint
small-chips
>
<template v-slot:no-data>
<v-list-item>
<v-list-item-content>
<v-list-item-title>No results matching {{ search }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-combobox>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: ["Programming", "Vue", "Vuetify"],
model: ["Vuetify"],
search: null,
}),
watch: {
model(val) {
if (val.length > 5) {
this.$nextTick(() => this.model.pop());
}
},
},
};
</script>
We add the no-data and populate it with text to show when there are no matches.
File Inputs
We can add a file input with the v-file-input component.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-file-input multiple label="File input"></v-file-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>
to add a file input.
The multiple prop allows for multiple file selection.
File Input Accept Formats
We can set the file formats the file input accept with the accept attribute:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-file-input accept="image/*" label="File input"></v-file-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>
File Input With Chips
We can add file input with chips.
So we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-file-input chips multiple label="File input with chips"></v-file-input>
<v-file-input small-chips multiple label="File input with small chips"></v-file-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>
We have the chips and small-chips props with the v-file-input .
Size Display
We can add a file size display with the show-size property.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-file-input show-size multiple label="File input"></v-file-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>
We have the show-size attribute, so the size will be shown.
Counter
We can add a counter prop with the show-size prop to show the total number of files and the size:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-file-input show-size counter multiple label="File input"></v-file-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>
Conclusion
We can add combobox with various kinds of content.
Also, we can add file inputs with the size and counter.
