Different behaviour of :value and v-model in a select tag when dynamically adding options while none is yet selected

[jonjanisch]

My custom "select" component behaves differently when compared to simply using a raw select element in my template.

When the custom select's value is null and the options are loaded async, the first option is automatically selected.

Expected: The custom select's "selected" value should remain empty. This is the behavior when using a raw select in the template (not a custom component).

Here's a simple fiddle illustrating the issue:
https://jsfiddle.net/33df9qu8/3/

If you uncomment the option with a null optionId in my fiddle:

{ text: 'Not selected', optionId: null },

...the select behaves perfectly fine and selects that option. But that's not really a workaround as it forces us to add a null option and changes our UX.

It may be related to these similar issues here:
#1008
#3673

Vue.js version

2.1.10

Chrome version

55.0.2883.95 (64-bit)

Reproduction Link

https://jsfiddle.net/33df9qu8/3/

[posva]

The behaviour is different because of the value binding instead of the v-model.
As a workaround you can use a computed property in the custom select and use the v-model directive instead of :value
https://jsfiddle.net/dux6q43p/

[jonjanisch]

Thank you. The workaround worked great but I'm not quite sure why it works. Is there anywhere in the docs where this is explained further?

[jonjanisch]

I noticed that neither my custom select nor the workaround demonstrated by @posva handle a null option properly (contrary to what I originally stated in my first comment).

{ text: 'Yellow', optionId: 'YELLOW'},
{ text: 'Not selected', optionId: null }, // <--- null option
{ text: 'Blue', optionId: 'BLUE'}

If the original select value is null, it properly selects Not Selected when the options are added dynamically initially. However, if you toggle to Blue and then back to Not selected, it will show an empty combobox (instead of Not Selected).

EDIT: For completeness I found a workaround for this problem as well. But it would be nice if component developers did not have to do this. I've updated the fiddle with the following workaround:

onChange(value) {
  if (value === '') {
    value = null;
  }
  this.$emit('input', value);
}

See here:
https://jsfiddle.net/dux6q43p/1/

[posva]

That's actually because the value of the select dom element is always a string. So instead of being null, it's just an empty string

[tiagomatosweb]

I think I'm experiencing something similar to this issue. I have asked in here, but not luck yet https://forum.vuejs.org/t/vuejs-ajax-populating-select-and-weird-behaviour/6222.

However I could figure out any workaround! Can someone give me a clue?
Much appreciated.

[yyx990803]

Closing due to inactivity (also because a workaround has been pointed out).