Don't show selected option in vue-select

Question

I have an array "option" with some element inside. And have vue-select feature. I want to not to show selected option in all options list.

So, I want to delete "RU" option form that list if "RU" is selected. Are there any decisions?

My component file:

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>

script part:

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

You can use computed:

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

and then use these "items" as options in select

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

Answer 2

If you're looking multi-select, you can use the following,

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