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

你可能感兴趣的:(Vue-Element之数据赋值与重置)