vue-treeselect

vue-treeselect copied to clipboard

I have created a select all checkbox that lives before the rest of the items, so that the user can easily select all items, however the checkbox doesn't update correctly until you close and reopen the tree select, see codepen

https://codepen.io/TSmith27/pen/dyOOpwr

Just add to options Select All

  data: {
    value: [],
    options: [
     {
       id: 'all',
       label: 'Select All',
     }, 
     {
       id: 'a',
       label: 'a',
     },
     {
       id: 'b',
       label: 'b',
     }],
  },

and check what is selected:

1. If Select All checked, check the rest.
2. if selected everything except Select All, check select All as well. Pseudo code:

if (this.options.length - 1 === this.value.length && this.value-not-include('Select All') {
   this.value.push('Select All')
}

The problem with that is that the select all ends up in the mutliselect tags which i don't want either

The problem with that is that the select all ends up in the mutliselect tags which i don't want either

Sorry, I do not understand... You want to select all, but do not want to select all? How is it?

The problem with that is that the select all ends up in the mutliselect tags which i don't want either

Sorry, I do not understand... You want to select all, but do not want to select all? How is it?

If you look at my code pen example I just want to select a and b by clicking the select all button. If I understand your example you are going to add an extra option called select all? But then it will appear in the v-model

I have created a select all checkbox that lives before the rest of the items, so that the user can easily select all items, however the checkbox doesn't update correctly until you close and reopen the tree select, see codepen

Here you want to have selected all 3

---

If you look at my code pen example I just want to select a and b by clicking the select all button. here you want to have selected just a and b

Here you want to have selected just a and b.

¯\(ツ)/¯

---

Just add "Select All" as an option and add watcher for "value" and if "Select All" selected, select a and b.

Something like:

watch: {
  value (newValue) {
    if (newValue.includes("Select All")) {
      this.value = ['a', 'b']
    }
  }
}