不要在 vue-select 中显示 selected 选项

Question

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

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

我的组件文件：

v-select:

<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];
    }
}

Answer 1

您可以使用计算：

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

然后将这些“项目”用作 select

中的选项

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

Answer 2

如果您正在查找 multi-select，您可以使用以下内容，

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

不要在 vue-select 中显示 selected 选项

Don't show selected option in vue-select

vue.js

vue-select