Vue多选选择时多个条件删除

dm7nw8vv  于 2022-12-30  发布在  Vue.js
关注(0)|答案(1)|浏览(190)

我使用这个漂亮的包Vue-Multiselect,在multiple模式下。

<multiselect v-model="values" :options="options" :multiple="true"
   label="name" track-by="name" @select="select" @input="input"
>
</multiselect>

添加选项时,我希望使用不同的group删除选定的选项

const options = [
  { name: "Option 1", group: 1 },
  { name: "Option 2", group: 1 },
  { name: "Option 3", group: 2 },
];

如果我在这里选择“选项3”,其他选项必须从选择中删除
如果我选择“选项2”,则必须删除“选项3”,但不删除“选项1”,等等。
首先,我考虑使用select事件修改input之前的选定值

export default {
  components: {
    Multiselect
  },
  data() {
    values: [],
    options: options
  },
  methods: {
    select(option) {
      this.values = this.values.filter(value => value.group != option.group);
    },
    input(options) {
      console.log(options);
    },
  }
}

但之后似乎被覆盖了。

在选择时,如何删除不同组的选定选项?

mhd8tkvw

mhd8tkvw1#

在“values”数组上添加一个观察器(在v-model中传递),并在观察器中使用以下逻辑。

watch: {
  values: {
    handler() {
      const len = values.length;
      this.values.splice(len-1, 1);
    }
  }
}

这不会覆盖该值。

相关问题