<select> doesn't select correct option after render

[fergusean]

Version

2.5.2

Reproduction link

https://jsfiddle.net/fergusean/a001nzw5/2/

Steps to reproduce

Nothing. Auto-fake AJAX data load.

What is expected?

The select should render, and the option whose value is == the value of the model bound to the select should be selected.

What is actually happening?

The first option in the select is active, until either a call to $forceUpdate, or another model is changed (click into the text field and type a letter). Then, suddenly, the correct value is selected in the dropdown.

---

This used to work in Vue 1. I upgraded and then discovered this. I'm working around it for now with a this.$nextTick(() => $this.forceUpdate());

[gebilaoxiong]

😄

https://jsfiddle.net/a001nzw5/4/

data: {
  options: [],
  myModel: null,
  myOtherModel: 'sample text'
}

[fergusean]

That is not a solution. When options is null, the select isn't rendered. It is rendered once options becomes a non-null value, in this case, an array. Thus, the initial value of options should have no bearing.

Furthermore, I can reproduce this behavior by separating the loading indication from the options. See https://jsfiddle.net/fergusean/a001nzw5/5/. Same behavior.

It seems that it works as expected if the select is wrapped in a template. See https://jsfiddle.net/fergusean/a001nzw5/6/.

So, it looks like this is only a problem when the element shares a v-model and a v-if. Regardless, given that the magically switches to the correct value once any of the data in the Vue instance is mutated, I believe this to be unintended behavior, aka a bug.