How to have a "select all" option on a v-select or v-combobox?

Question

How do we have a select all option for selecting everything in a v-select or a v-combobox ?

Answer 1

Vuetify have no Select all option for v-select. But, you can do your own with a button and a method.

Like this :

JS

methods: {
    selectAll(){
      // Copy all v-select's items in your selectedItem array
      this.yourVSelectModel = [...this.vSelectItems]
    }
}

HTML

<v-btn @click="selectAll">Select all</v-btn>

CodePen with SelectAll Button

---

EDIT v1.2 Vuetify added prepend-item slot that let you add a custom item before listing items.

The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.

HTML

<v-select
  v-model="selectedFruits"
  :items="fruits"
  label="Favorite Fruits"
  multiple
>
  <!-- Add a tile with Select All as Lalbel and binded on a method that add or remove all items -->
  <v-list-tile
    slot="prepend-item"
    ripple
    @click="toggle"
  >
    <v-list-tile-action>
      <v-icon :color="selectedFruits.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
    </v-list-tile-action>
    <v-list-tile-title>Select All</v-list-tile-title>
  </v-list-tile>
  <v-divider
    slot="prepend-item"
    class="mt-2"
  />
</v-select>

JS

computed: {
  likesAllFruit () {
    return this.selectedFruits.length === this.fruits.length
  },
  likesSomeFruit () {
    return this.selectedFruits.length > 0 && !this.likesAllFruit
  },
  icon () {
    if (this.likesAllFruit) return 'mdi-close-box'
    if (this.likesSomeFruit) return 'mdi-minus-box'
    return 'mdi-checkbox-blank-outline'
  }
},

methods: {
  toggle () {
    this.$nextTick(() => {
      if (this.likesAllFruit) {
        this.selectedFruits = []
      } else {
        this.selectedFruits = this.fruits.slice()
      }
    })
  }
}

Code Pen with Select All prepend item

Vuetify Doc about Prepend and Append Slots in v-select