Hide selected items in dropdown in multipe selection mode

[davidalvarezr]

How to do that ?

[danielcmm]

i was wondering the same... its possible to do this by listening the @input event and manipulating the list, but i think it would be much better to have a property applying this behavior.

[davidalvarezr]

The problem is that if we listen the input envient in order to remove the selected element from the array, then we lose the information that it has been selected, and it would not appear in the selected items. How would you do that ? @danielcmm

[rusikf]

+1 how to do this ?

[rusikf]

As a quick fix I added css:

.vs__dropdown-option--disabled {
    display: none;
}

So, disabled options not displayed, but when ALL options are selected, small empty dropdown list is shown( because options are disabled but hidden through css)

My example:

          <v-select
            multiple
            label='title'
            v-model='form.page_ids'
            placeholder="Search by article title"
            :options="pages"
            :reduce="page => page.id"
            :selectable="option => !form.page_ids.includes(option.id)"
          >
          </v-select>

Where pages is [{ id: 1, title: 'Page 1'}, id: 2, {title: 'Vue js is awesome'}] If I remove my css hack, and use fillteredOptions computed property instead pages ( where filteredOptions changes dynamically and remove selected), plugin displays only ids :(

Is it possible to add option for this behavior please?@sagalbot

[danielcmm]

What i ended up doing was just disabling the already selected options:

HTML: <v-select multiple label="name" id="permissions" v-model="role.permissions" @input="markSelectedPermissions" :selectable="option => !option.selected" :close-on-select="false" :options="permissions" />

Javascript: markSelectedPermissions(){

            for (let i = 0; i < this.permissions.length; i++) {
                let selected = false;

                for (let j = 0; j < this.role.permissions.length; j++) {
                    if (this.permissions[i].id == this.role.permissions[j].id){
                        selected = true;
                        break;
                    }
                }

                this.permissions[i].selected = selected;
            }

        }

Not the best solution in the world but, in my case, with few items, its working fine. If you guys know a better way, id be glad to hear...

[johnhatch]

Filtering out already-selected options was the most elegant solution for my use case:

<!-- Before -->
<v-select multiple v-model="selected" :options="options" label="name" />

<!-- After -->
<v-select multiple v-model="selected" :options="options.filter(o => selected.indexOf(o) < 0)" label="name" />

[contactlakrita]

Filtering out already-selected options was the most elegant solution for my use case:

<!-- Before -->
<v-select multiple v-model="selected" :options="options" label="name" />

<!-- After -->
<v-select multiple v-model="selected" :options="options.filter(o => selected.indexOf(o) < 0)" label="name" />

how would that work if I reduce the object

[EbertJoris]

I noticed a new solution is available, I would like to update and maybe close this issue with my answer.

<v-select multiple v-model="selectedOptions" :options="options" :selectable="option => selectedOptions.indexOf(option) < 0" />

This disabled the list element in the dropdown, if you wish to hide the element a display none can be used:

.vs__dropdown-option--disabled { display: none; }