v-model with uninitialized property

Vue.js version

2.0 rc

Reproduction Link

http://codepen.io/anon/pen/xEqbmN?editors=1010#0

What is Expected?

Not sure if this is what is expected in Vue 2.0. Tried to search but couldn’t find anything. e.g:

data: {
  model: {
    a: ''
  }
}

<input v-model="model.a" />
<input v-model="model.b" />

If you pass an uninitialized property (model.b) to v-model, it’s obviously not reactive so bindings won’t update or a deep watch on this.model won’t fire off either.

Any chance that v-model could use Vue.set internally if it detects a binding with value undefined to automatically create reactive properties? (like Vue 1.0)

Or failing that, it should warn when an uninitialized property is passed to v-model

[yyx990803]

This is an intended change in 2.0 - v-model no longer creates non-existent properties for you, the basic idea is that all root-level properties must be declared in data at instance creation.

[neitanod]

According Vue’s documentation, v-model="item.prop" is just syntactic sugar for: v-bind:value="item.prop" v-on:input="item.prop = $event.target.value".

The problem is that WHILE IT STILL CREATES THE PROPERTY it does not make it reactive, so when you combine it with a v-for with dynamically added objects you could end up with a collection of objects, some of them reactive and some of them not reactive.

But, as I said, v-model still creates the property, so the desired effect of motivating you to declare things properly is achieved by the silent threat of reactiveness bugs exploding on your user’s faces instead of a proper warning or just the mitigation of a more common sense v-model behavior.

So to get what we all (except Evan) want, we should stop using v-model="item.prop" and start writing: :value="item.prop" @input="$set(item,'prop',$event.target.value)" which is sugar free and sad.