vue-select icon indicating copy to clipboard operation
vue-select copied to clipboard

@option:selected return whole multiple selection and not the single involved option

Open milanteo opened this issue 2 years ago • 2 comments

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

Describe the bug The function executed on the @option:selected event on a multiple select receives as argument the whole selection and not the single option

Expected behavior The function should receive as argument only the single involved option.

milanteo avatar Apr 20 '22 12:04 milanteo

I can confirm this bug:

  • Vue version: 2.6.14
  • Vue select version: 3.18.3
<v-select 
    label="name"
    :options="selectOptions"
    v-model="userOptions"
    :multiple="true"
    :taggable="false"
    @option:selected="update"
    @option:deselected="remove"
>
</v-select>
...
methods: {
    update (item) {
	console.dir(item)
    },

    remove (item) {

	console.dir(item)
    }
}

With two items already stored in userOptions, selecting a new option outputs:

[
    {
        "id": 1,
        "slug": "google",
        "name": "Google"
    },
    {
        "id": 2,
        "slug": "firefox",
        "name": "Firefox"
    },
    {
        "id": 5,
        "slug": "internet-explorer",
        "name": "Internet Explorer"
    }
]

The deselected call works fine - passing the removed item as expected

euperia avatar Jun 26 '22 18:06 euperia

As the array returned from @option:selected event ALWAYS preserves the order of the selected values, you can use its length to get the latest selected option.

Now my update method looks like this,

update(item) {
    console.log(item[item.length - 1])
}

As for this,

The function should receive as argument only the single involved option.

I think it's not supposed to be like that. Not entirely sure though! Also note the @option:deselected event does not work with single vue-select

DudhaneShrey86 avatar Sep 01 '22 16:09 DudhaneShrey86