时间戳

首页 > 解决方案 > 如何取消选择vue多选中的预选组选项？

javascript - 如何取消选择vue多选中的预选组选项？

问题描述

我正在使用vue 多选插件。我正在使用组选择选项来明智地选择值组。我将选定的值存储在本地存储中以维护用户预先选择的选项。当我为组选择值时，它工作正常，但是当我在页面重新加载时预先选择值时，值会被正确设置，但全选选项不会取消选择选定的值。

有没有办法跟踪 vue 多选中的组取消选择选项，或者有没有一种方法可以有效地使用这个 vue 多选插件并维护选定和取消选择的值。

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 &amp;&amp; !isOpen"
    >{{ values.length }} Locations Selected</span>
  </template>
</multiselect>

脚本：

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

}

我在页面加载时设置位置数组。

标签： javascriptvue.jsvuejs2vue-multiselect

解决方案

 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
    },

推荐阅读