[英]How to deselect pre-selected group options in vue multi select?
I am using vue multi select plugin.我正在使用vue 多选插件。 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.
我将选定的值存储在 localstorage 中以维护用户预选的选项。 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 多选中跟踪组取消选择选项,或者有没有一种方法可以有效地使用这个 vue 多选插件并维护选定和取消选择的值。
Vue multiselect tag code is shown below with used props. Vue 多选标记代码如下所示,其中包含使用的道具。
<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
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.