如何解决在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))
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。