vue v-model 无法把值从undefined变成有值

Question

在建表单时候一般先在data里面声明表单的数值

<input v-model="form.name">

data:{
    return{
        form:{name:''}
    };
}

但是有时候并不清楚form里面有什么内容,或者完全由数据决定

<input v-model="form.name">

data:{
    return{
        form:{}
    };
}

那这个input 绑定的就是一个undefined
这个时候我们在下面执行 this.form.name='张三'
会发现可以虽然可以赋值,但是input还是空的,并且无法在input里面输入任何内容,也没有任何错误提示
只能改变整个form才能避免这种情况 this.form=Object.assign({name:'张三'},this.form)

有没有其他解决方案呢

Answer 1

先说取值：当一个对象的属性并不存在的时候，取值时默认就是 undefined ，所以这里你的input绑定的就是 undefined
再说赋值：首先，Vue 不能检测到对象属性的添加或删除,你使用 this.form.name 相当于给原有对象 form 添加了一个 name 属性，Vue 并不能做到响应处理，所以这也是 Vue 中 data 数据初始化的目的
Vue 本身也提供了这种特殊情况的处理方式

this.$set(this.form, 'name', '')

当然还有你现在使用的 Object.assign() 这种方式

Answer 2

建议好好阅读Vue.js文档传送门