Vue-Element之数据赋值与重置

Vue-Element之数据赋值与重置

1. 父组件传递给子组件的对象变量，不能直接赋值或通过计算属性给子组件的变量赋值。因为对象的特性，直接赋值会使得子组件中对象的取值受到父组件中相应对象的影响。应采用下面的形式

let form = Object.assign({}, this.formInline)

2. 服务器返回的数据覆盖表格中的内容，不用循环数组push的方式给tableData赋值，而采用下面的形式，直接赋值

this.tableData = res.data.data.*

3. 向对象中增加属性，不能采用直接赋值的形式，如：

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:''
    }
}

作者：晔子与Bug的战斗史
链接：https://www.jianshu.com/p/22e363a286f4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。