Can the object returned be obtained when selecting an option?

[heyner29]

Prerequisites

• [X] Are you running the latest version?
• [X] Are you reporting to the correct repository?
• [X] Did you check the documentation?
• [X] Did you perform a cursory search?

Description

I would like to be able to obtain the complete object of the selection. That when selecting an option or pressing enter you can assign the object to a variable or something like that, I do not know if it is possible. And I would also like to know if it is possible to handle events, for example, when selecting one, pass the focus to the next field or how you could reset its value from the code, for example make a button to clean the form. I thank you in advance for your help.

[aocneanu]

I would like to be able to obtain the complete object of the selection.

Right now you can do this only programatically. We are planning for the future the upgrade the component to work in object mode too. Until then this should do the job:

<vue-select props
    ref="select"
    @input="getSelectedObject"
>

....

getSelectedObject($event) {
     const select = this.$refs.select;

     obj = select.filteredOptions.find(option => option[select.trackBy] === select.value);
}

This will work for single selects, for multiple you can replace the find method with an adapted filter.

And I would also like to know if it is possible to handle events, for example, when selecting one, pass the focus to the next field

This would be a really awkward behaviour. Imagine selecting the wrong option ... You can press tab to jump to the next field, this is the browser's native behaviour.

how you could reset its value from the code

The component has an clear-button option the acts on the clear() method. So a simple this.$refs.select.clear() will be enough for that.

[heyner29]

Thank you very much, your answers were very helpful. I managed to solve it with the @input. Also this.$refs.select.clear() resolved my need. Thank you