Vue: Objects being evaluated as strings when bound to an <option> inside a <select> from within a component.

[Bumbolio]

Version

2.4.2

Reproduction link

https://jsfiddle.net/Bumbolio/2bvb90f5/5/

Steps to reproduce

Be sure to check out the included JSFiddle for a simple example.

1.) Create a new component with a select element.
2.) Bind the value of the options inside the select element to the actual option object.
3.) Write an onChange method that triggers an 'input' event to follow the v-model pattern.
3.) Use the newly created component inside a vuejs app and pass it an array of objects as the options.
4.) Notice that when an option is selected, the selected value is the string [Object object] rather than the actual object.

Keep in mind that this works perfectly fine when the select field is outside of a component, it's when your using it inside a component that this bug appears.

What is expected?

When an option inside a select is bound to an object within a component, I expect the value of the selected item to be an object, not a string.

What is actually happening?

When an option inside a select is bound to an object within a component, the value of the selected item is a string representation of the object, rather than the object.

---

I'm building a component library for a project. In this library there are pre-styled inputs for use in our forms. For select components, I like to retain the original object rather than just a key since I typically need to send the entire object back to the server when updating said object.

[jkzing]

IMO It's not a bug, the reason why v-model works like you expected on select but not on custom components is that vue does add v-model runtime code during compile time for select but not for custom components. Which result in that for select vue is not using $event.target.value to retrieve the selected value.
So if you do like https://jsfiddle.net/2bvb90f5/8/, you will find out the behaviors are same.

For your use case, use a computed value with get and set could do the trick: https://jsfiddle.net/2bvb90f5/7/

[posva]

This is indeed expected behaviour, if you try to set the value of the HTML element to an object, it will just convert it to a string before actually setting the value.
What @jkzing proposed, with a computed property, is a good way to go

[Bumbolio]

@jkzing Thanks for the prompt reply, this workaround should do the trick. From the perspective of a new user of vuejs, it's confusing to read documentation such as (https://vuejs.org/v2/guide/forms.html#Select-Options) and then try to apply it to a component and not have it work as expected. Architecturally, I understand the decision made, and I totally understand your explanation @posva which was my original assumption when I first ran into this issue. But after reading that section of the doc, I was convinced that what I was doing was correct and I had found a bug.

I believe that the interface for any framework should be consistent, however wrong or right that interface may be. Having this behavior work outside of components is great, but not seeing the same behavior inside a component is confusing, at least to the casual user or beginner.

[posva]

Well, it will work the same if the custom select component is correctly implemented. But the point is one is using @change and the other is using v-model