Adding Buttons in dropdown like Select All, Deselect All.

[umang-gramener]

I tried achieving this with beforelist, but was not able to make the button reactive, i even tried putting as check boxes still nothing worked.
is there a way we can implement this? or can we get it built in as options?

[adamberecz]

This should be it:

<template>
  <div id="app">
    <div>
      <Multiselect
        v-model="value"
        :options="options"
        mode="multiple"
        ref="select$"
      >
        <template #beforelist>
          <a href="" @click.prevent="handleSelectAll">Select all</a> • 
          <a href="" @click.prevent="handleDeselectAll">Deselect all</a>
        </template>
      </Multiselect>
    </div>
  </div>
</template>

<script>
import Multiselect from '@vueform/multiselect'

export default {
  name: 'App',
  components: {
    Multiselect,
  },
  data() {
    return {
      value: [],
      options: ['value1', 'value2', 'value3'],
      select$: null,
    }
  },
  methods: {
    handleSelectAll() {
      this.select$.selectAll()
    },
    handleDeselectAll() {
      this.select$.clear()
    },
  },
  mounted() {
    this.select$ = this.$refs.select$
  }
}
</script>

The selectAll method will be available in next release, until that you can use:

handleSelectAll() {
  this.select$.select(this.select$.filteredOptions)
}

[ponochovny]

For some reason when I click many times this "Select all" button - it doubles 'internalValue', and the length of values doubles, so even the message 'multipleLabelText' increases with the count of values

[ponochovny]

Found the solution. When click 'Select all' just execute 'Deselect all' and 'Select all' methods

[georginklv]

This how it's suppose to happen with composition api ?