不要在 vue-select 中显示选定的选项答案

【问题标题】：Don't show selected option in vue-select不要在 vue-select 中显示选定的选项
【发布时间】：2021-02-17 05:16:17
【问题描述】：

我有一个数组“选项”，里面有一些元素。并具有 vue-select 功能。我不想在所有选项列表中显示选定的选项。

所以，如果选择了“RU”，我想删除该列表中的“RU”选项表单。有什么决定吗？

我的组件文件：

v-选择：

<v-select :options="options" label="title" class="select" v-model="selectedLang">
            <template slot="option" slot-scope="option">
                <img class="language-flag" :src="option.img" /> {{ option.title }}
            </template>
            <template slot="selected-option" slot-scope="option">
                <img class="language-flag" :src="option.img" /> {{ option.title }}
            </template>
</v-select>

脚本部分：

export default {
    data() {
        return {
            options: [{
                    title: 'RU',
                    img: require('../../assets/icons/flags/RU.svg'),
                },
                {
                    title: 'KZ',
                    img: require('../../assets/icons/flags/KZ.svg')
                },
            ],
            selectedLang: null,
        }
    },
    mounted() {
        this.selectedLang = this.options[0];
    }
}

【问题讨论】：

你在寻找多选吗？，为single select使用过滤器没有任何意义

标签： vue.js vue-select

【解决方案1】：

你可以使用计算：

computed: {
    items () {
      return this.options.filter(i => i.title !== this.selectedLang?.title)
    }
}

然后将这些“项目”用作选择中的选项

<v-select :options="items" label="title" class="select" v- 
     model="selectedLang">

【讨论】：

【解决方案2】：

如果你正在寻找多选，你可以使用以下，

<v-select multiple :options="getOptions" ... />

{{ selectedLang }} // Prints selected options

{
  data: {
    selectedLang: [],
    options: [
      { title: 'RU', img: require(...) },
      { title: 'KZ', img: require(...) }
    ]
  },
  computed: {
    getOptions() {
      return this.options.filter(option => !this.selectedLang.find(o => o.title === option.title))
    }
  }
}

【讨论】：