Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
milanteo opened this issue Apr 20, 2022 · 2 comments
Labels

Comments

@milanteo
Copy link

milanteo commented Apr 20, 2022

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

  • Vue Version: vue@3.2.32
  • Vue Select Version: vue-select@4.0.0-beta.3

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 milanteo added the bug label Apr 20, 2022
@euperia
Copy link

euperia commented Jun 26, 2022

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

@DudhaneShrey86
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants