v-model with uninitialized property

[fergaldoyle]

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.

[pyrostrex]

@yyx990803 is there any other way i can do this in vue2?

[waveiron]

It's ok that non-existent properties of data could not be tracked, but when data.row = {} and data.row.username could not be tracked? Ridiculous.

[laurentvdl]

When building large forms, I now need to duplicate all property names in the template, the data initialiser function (for create) and make sure any objects that are edited have all possible properties present (null value for missing properties) before binding them in vue.

v-model still creates the properties without warning, but not as a reactive property, meaning some properties become reactive and some not, leading to strange behaviour. (for instance when using computed properties)

A custom v-model directive can be a solution, but it's a pity the default behaviour has changed.

[codeofsumit]

@yyx990803 we definitely need this as well to have bindings to non-existend sub-properties. Any workarounds? The models we're dealing with here are way to big to provide default stuff (also, this is send to the API and is just messy).

[posva]

@codeofsumit You should always try to fill the data property. If that's not possible use Vue.set
Next, time please, use the forum or StackOverflow for questions. Thanks 🙂

[codeofsumit]

@posva I'll follow up on this in the forums. Thank you!

[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.

[joaomnb]

This behavior has been reverted, after a long discussion in #5932