如何制作切换列表 vue-select？

问题描述

我需要确保当你点击一个已经处于活动状态的选项时，它会被取消选择。

<v-select class="form-control" name="language" v-model="language" id="language" :options="['English','Polish']" :clearable="false" :searchable="false" :multiple="true" :cloSEOnSelect="false"></v-select>

Photo Example

我无法在 Internet 和文档中找到这方面的信息，所以我希望得到您的帮助。

解决方法

没有任何内置方式或道具可以取消选择 vue-select 包的项目，但是有两种方法可以解决：

1)您可以使用 (option:selecting) 事件自己过滤数组，从而取消选择该选项。查看下面的示例。

<template>
   <div>
      <v-select
         class="form-control"
         name="language"
         v-model="language"
         id="language"
         :options="['English','Polish']"
         :clearable="false"
         :searchable="false"
         :multiple="true"
         :closeOnSelect="false"
         @option:selecting="handleDeselect"
      ></v-select>
      <div class="mt-40">Languages is : {{ language }}</div>
   </div>
</template>

<script>
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";
export default {
   components: { vSelect },data() {
      return {
         language: ["English"],};
   },methods: {
      handleDeselect(e) {
         // Check if the lagueage array contains the selected element (e)
         // If so,filter the language array
         if (this.language.includes(e)) {
            this.language = this.language.filter((el) => {
               return el != e;
            });
         }
      },},};
</script>

2) 使用 vue-multiselect 包提供开箱即用的取消选择功能（最简单和我喜欢的方式）