Vue: Using multiple selects with v-model and bound and unbound values causes value overriding

[KelsamGames]

Version

2.5.17

Reproduction link

https://jsfiddle.net/du578xc0/32/

Steps to reproduce

change first select to "Some", then change newly displayed select. You will see that val2 is being set to the bound vals from the val1 select instead of it's own values.

You can change the first select to use the .number modifier on the v-model and exchange the bound number values for strings to fix this issue. (at least for this very specific desired effect).

You can "fix" the problem by either using v-bind:value on all values, or by using non-bound values on all values - but as far as I can tell, if you mix them, then it will cause this override bug

What is expected?

different values for each variable

What is actually happening?

second variable is being overwritten with the first's value

---

This was posted/discussed in the discord chat

[lbogdan]

As I said on Discord, this is not really a bug, but related to how Vue is reusing DOM elements when re-rendering on state changes. In this particular case, the select and the first two of its options are reused, and for some reason (ok, this might be a small bug 🙂 ) the <option>s remain bound to their initial values. There's two ways you can fix this:

• bind the values in the second select, too: https://jsfiddle.net/du578xc0/49/ , or
• use a distinct key on the <select>s, to explicitly tell Vue not to reuse them: https://jsfiddle.net/du578xc0/51/ .

[KelsamGames]

Use of the key attr is the perfect solution to this, thank you!