- 父组件传递给子组件的对象变量,不能直接赋值或通过计算属性给子组件的变量赋值。因为对象的特性,直接赋值会使得子组件中对象的取值受到父组件中相应对象的影响。应采用下面的形式
let form = Object.assign({}, this.formInline)
- 服务器返回的数据覆盖表格中的内容,不用循环数组push的方式给tableData赋值,而采用下面的形式,直接赋值
this.tableData = res.data.data.*
- 向对象中增加属性,不能采用直接赋值的形式,如:
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
官方的解释:这是由于js的限制,导致Vue不能检测对象属性的添加或删除;
有效的方法是:
var vm = new Vue({
data: {
user: {
name: 'Anika'
}
}
})
//添加单个属性
Vue.set(vm.user, 'age', 27)
//添加多个属性,采用新对象取代老对象的方式
this.user = Object.assign({}, this.user, {
age: 27,
sex: 'male'
})
参考vuejs.org
在项目中经常遇到重置表单的情况,鉴于上述特征,在重置表单时采用手动赋默认值的方式来重置,详细内容请移步表单重置错误示例
var vm = new Vue({
data: {
form: {
name: '',
id:''
}
}
})
//resetForm
reset(){
this.form = {
name: '',
id:''
}
}