vue-select
vue-select copied to clipboard
@option:selected return whole multiple selection and not the single involved option
Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.
- Vue Version: [email protected]
- Vue Select Version: [email protected]
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.
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
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