By passing option straight to v-bind, it converts a model class to plain object, losing access to virtual getters #1857
Description
Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.
- Vue Version: 3.5.12
- Vue Select Version: 4.0.0-beta.6
Describe the bug
By passing option straight to v-bind, it converts a model class to plain object, losing access to virtual getters that may be defined on the option (e.g. for the label prop).
This happens here: https://github.com/sagalbot/vue-select/blob/beta/src/components/Select.vue#L116:
<slot name="option" v-bind="normalizeOptionForSlot(option)">
Instead, it should imo pass the option as is, in the same way as the option is passed to the selected-option-container slot, e.g.:
<slot name="option" :option="normalizeOptionForSlot(option)">
This passes the option as-is, without conversion to a plain object.
Reproduction Link
https://codepen.io/adamreisnz/pen/bGXMRwX
You can see that the fullName virtual property of the options does not work in the #option template, but once you select the options, it shows up correctly in the #selected-options-container template, because the option is bound to it as-is:
Note: I've used an older version of VSelect and Vue for this pen, but the same problem exists in 4.0.0-beta.6
Steps To Reproduce
As per the reproduction script. Create an array of options with objects that have virtual getters, and try to use the #option template slot to access the virtual prop. It fails and doesn't exist due to v-bind converting this to a plain object.
Expected behavior
Expect the option to be bound to the slot via :option="option" instead of v-bind="option" so that this conversion does not take place, so that we can access virtual getters in the template.
Screenshots
