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 && !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.