Vue-multiselect: Possible to have a select all?

[tverilytt]

Hi!
Would it be possible to have a special "select all" option?

Cheers
-jo

[shentao]

Select all as in whole group (when using option groups) or just select all in general? If the latter I think you could push a special option whose label would be "Select all" and then using the @select event handler – push all the other options to the value (just making sure to remove the duplicates).
No plans for such a feature.

[tverilytt]

@shentao Thanks for good suggestion, yes, I was thinking of selecting all in general.
It seems to work with a "Select All", but I am not sure how to update the displayed list of selected items? As of now "Select All" is added, when selected. The select action adds all options to the model.

Edit: switching from using "v-model" to ":value" seems to do the trick, as you described 👍

Cheers
-jo

[ZAZmaster]

@tverilytt hello! How did you solve the problem?

[tverilytt]

@ZAZmaster Hi!
I have tried to extract the interesting pieces on this from the application. I use the vue-good-table also, so some mix with that. I could put all the stuff on GitHub too for sure.

I have both a "Select All" and a "default" select option which contains "standard options" for table columns.

<multiselect
  :value="tableColumnsSelected"
  placeholder="Table columns"
  :options="tableColumnSelectOptions"
  :multiple="true"
  @select="tableColumnAdded"
  @remove="tableColumnRemoved"
>
</multiselect>

...

var defaultTableColumns = ['id', 'type', 'status', 'datacenter', 'domain'];
var selectAllOption = 'Select All';
var selectDefaultsOption = 'Select Defaults';

...

     this.tableColumnSelectOptions = Object.keys(this.rows[0]);
     this.tableColumnSelectOptions.unshift(selectDefaultsOption + ' (' + defaultTableColumns.toString() + ')');
     this.tableColumnSelectOptions.unshift(selectAllOption);

...

tableColumnAdded(option) {
  console.log('tableColumnAdded...', option, this.tableColumnsSelected, this.tableColumnSelectOptions);

  if (option === selectAllOption)
     this.tableColumnsSelected = this.tableColumnSelectOptions.slice(2);
  else if (option.startsWith(selectDefaultsOption))
     this.tableColumnsSelected = defaultTableColumns.slice(0);
  else
     this.tableColumnsSelected.push(option);

...
}

[tverilytt]

@ZAZmaster LMK if you need more details :-)

[ZAZmaster]

@tverilytt can you show a working example on jsfiddle?

[thinckx]

Couldn't get the jsfiddle to work, but this is how it's done on my end:

<div id="app">
  <multiselect
    v-model="value"
    :multiple="true"
    track-by="name"
    label="name"
    :options="options"
    :preselect-first="false"
    @select="handleSelect"
  />  
</div>

  import Multiselect from 'vue-multiselect'

  // register globally
  Vue.component('multiselect', Multiselect)

  export default {
    // OR register locally
    components: { Multiselect },
    data () {
      return {
        name: 'foo',
        value: null,
        options: [
            {
            name: 'bar',
            value: 1
          },
          {
            name: 'baz',
            value: 2
          }
        ]
      }
    },
    methods: {
        handleSelect(event) {
        if (parseInt(event.value) === 0) {
          // select all
          for (let item of this.options) {
            if (parseInt(item.value) > 0) {
              this.value.push(item);
              this.$emit('handle-select', item.value);
            }
          }                
        } else {
          this.$emit('handle-select', event.value);
        }
      }
    },

    mounted () {
        this.options.push({
        name: "Select all",
        value: 0
      })
    }
  }

[ghost]

@thinckx Hi! In the mounted hook you add a 'Select All' option to the 'slaveSelect'.
Why 'slaveSelect'? Where do you assign this id to the select?

[thinckx]

@artemIschenko Aaaah, good catch. That was a remainer of my personal project, I've edited the snippet. Thanks!

[ghost]

@thinckx Thanks man. Your personal project was a slave market? =)

[ghost]

@thinckx I have an other problem. When we click on the SelectAll before selecting other options, this.value = null and this.value.push(item); will throw a null reference exception.
I tried to instantiate this.value with an empty array this.value = [] before the loop but it didn't help. I guess because the value shouldn't be just an array but some special object

Do you have this problem?