Vuetify — Combobox and File Input

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.