Vue: Unexpected behavior: $data property disappears when checking value in text interpolation

[pyrello]

Vue.js version

v2.1.10

Reproduction Link

https://jsfiddle.net/pyrello/wmqj3est/2/

Steps to reproduce

1. Click the link above
2. In the output panel, the $data is output and includes the properties 'selectedItem', 'selectedItem2', and 'selectedItem3'.
3. In the output panel, click the link labeled "Select Run the Jewels"
4. Notice that the 'selectedItem2' and 'selectedItem3' properties have disappeared from $data

What is Expected?

I would expect that the property being checked doesn't get removed from the $data object. The fiddle I linked to is one example, but I tried changed the comparison to '==' instead of '==='. Originally, I found this in a project I am working on where the property in question is contained in a .vue single-file component, so the $data object is the returned value of a function.

What is actually happening?

The property being checked is being removed from the $data object. I had never encountered the behavior before of a property being removed from the $data object, but considering that it happens regardless of whether it happens during interpolation or using v-text, this seems like a bug.

Edit: updated to correct version in fiddle above.

[LinusBorg]

Seems to be a bug indeed. When removing the interpolation with the === operator, everything works: https://jsfiddle.net/wmqj3est/3/

Is v2.0.2 the oldest version you tested this with?

[pyrello]

In the project where I originally noticed it, I appear to be using v2.0.1. I have not tested a version earlier than that.

Also it looks like the version I tested against in the fiddle is wrong above. That is my bad, I figured the issue template had the current version. The actual version in the fiddle is v2.1.10.

[pyrello]

Here is the version of the fiddle that I meant to post: https://jsfiddle.net/pyrello/wmqj3est/6/

It is a more comprehensive example. The behavior also occurs using v-text.

[LinusBorg]

/ping @yyx990803 That seems to be something ugly.

[posva]

I think it's actually expected:

• The options, not having a value attr, are getting it from their text
• When the v-model variable is set, Vue tries to match it against option values
• It can't and sets it to undefined

Binding their values to item solves it: here's a fixed version: https://jsfiddle.net/45y6yyan/

[yyx990803]

Yeah, you need to add a value binding for the options.

[sirlancelot]

Adding <option v-for="item in options" v-bind:value="item"> works as expected.

[pyrello]

Thank you for the clarification. It makes sense, after having it explained to me.