Hide-selected in multiple components sharing the same items prop

Question

So I basically have multiple v-select that all share the same :items prop. Now if an item is selected from one of the v-select, I want to hide it from all v-select so we can't choose it again. Inverse logic when the item is free again.

Is that possible?

<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: ''
            }
        ]
        ...
    }
}

You could use a commuted property for the v-select options list, if the selected item (as a data attribute) is selected, it is then removed from that computed property. If you can show some code examples, then I can help show you how to implement it. — Alicia Sykes, Dec 20 '21 at 23:17

score 0 · Answer 1 · answered Dec 21 '21 at 17:35

0

If you're working with multiple components looks like you need to start using Vuex. This way you can have a global state, and use the same items array in all your v-selects over your components.

answered Dec 21 '21 at 17:35

cmfc31

1,385
2
8
9

Hide-selected in multiple components sharing the same items prop

1 Answers1