简体   繁体   中英

How to deselect pre-selected group options in vue multi select?

I am using vue multi select plugin. I am using group select option to select the values group wise. I am storing the selected values in localstorage to maintain the preselected option by the user. When I select the values for the group its working properly but when I preselect the values on page reload then the values are getting set properly but the select all option is not deselecting the selected values.

Is there a way to track group deselect option in vue multi select or is there a way in which I can use this vue multiselect plugin effectively and maintain the selected and deselected values.

Vue multiselect tag code is shown below with used props.

    <multiselect
  v-model="location"
  :options="options"
  :multiple="true"
  :close-on-select="false"
  :clear-on-select="false"
  :preserve-search="true"
  placeholder="Locations"
  label="name"
  track-by="name"
  :allow-empty="true"
  @input="updateOptions($event)"
  group-values="locationData"
  group-label="location"
  :group-select="true"
  :preselect-first="false"
>
  <template slot="selection" slot-scope="{ values, search, isOpen }">
    <span
      class="multiselect__single"
      v-if="values.length &amp;&amp; !isOpen"
    >{{ values.length }} Locations Selected</span>
  </template>
</multiselect>

Scripts :

  data() {
return {
  locations: {},
  location: {},
  options: [
    {
      location: "Select All",
      locationData: []
    }
  ]
};

}

I am setting the location array on load of the page.

 computed: {
    options_length: function () {
        return this.item.options.length;
    }
},
methods:{

    onSelectChange (value) {
        if (value.length == this.options_length && this.selectedAll === null) {
        console.log(this.options_length);
            this.selectedAll = true;
        } else if (value.length == this.options_length && this.selectedAll === true) {
            this.selectedOptions = [];
            this.selectedAll = null;
        }
        // do the thing
    },

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM