在vue-select中不显示所选选项

问题描述

我有一个数组“ option”，里面有一些元素。并具有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];
    }
}

解决方法

您可以使用计算型：

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

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

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

,

如果您要进行多选，则可以使用以下内容，

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