<select> doesn't select correct option after render

[fergusean]

Version

2.5.2

Reproduction link

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

Steps to reproduce

In the links, nothing. In your own instances, set a v-if on a select that also has a v-model (see examples).

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());

I previous submitted this issue as #6882, however I believe @gebilaoxiong closed it prematurely. The provided "solution" changed the functionality and did not solve the actual issue.

[posva]

It looks like there is a race condition happening.
As a work around you can also set a key on one of the select elements

[yyx990803]

This is because the logic for updating the value when options change is inside componentUpdated and not called on bind, however in this case the presence of the directive is being toggled on the same select element.

[gebilaoxiong]

@fergusean I'm sorry to close your issue too soon 😄

[yyx990803]

closed via #6910