在共享相同项目道具的多个组件中隐藏选择

Posted 2023-02-22

【中文标题】在共享相同项目道具的多个组件中隐藏选择

【英文标题】：Hide-selected in multiple components sharing the same items prop

【发布时间】：2022-01-22 10:03:10

【问题描述】：

所以我基本上有多个v-select，它们都共享相同的:items 属性。现在，如果从v-select 之一中选择了一个项目，我想将其隐藏在所有v-select 中，因此我们无法再次选择它。物品再次空闲时的逆逻辑。

这可能吗？

<div v-for="(filter, index) in group.filterMeta" :key="index">
    <v-select
      v-model="filter.tag"
      :items="availableTags"
      :label="i18n('select.tag.label')"
    >
    </v-select>
</div>

@Component
export default class ManageGroupDialog extends Vue 
    ...
    /** Available tags */
    public availableTags = ['resource', 'resource_type', 'host', 'technology']
    ...
    public group: Group = 
        ...
        filterMeta: [
            
                 tag: '',
                 value: '',
                 operator: ''
            
        ]
        ...
    

【问题讨论】：

您可以为 v-select 选项列表使用 commuted 属性，如果选择了选定的项目（作为数据属性），那么它将从该计算属性中删除。如果您可以展示一些代码示例，那么我可以帮助您展示如何实现它。

你的意思是计算属性？

添加代码示例@Alicia

【参考方案1】：

如果您正在使用多个组件，您似乎需要开始使用Vuex。这样你就可以拥有一个全局状态，并在你的所有v-selects 中使用相同的 items 数组来覆盖你的组件。