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:''
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,242评论 6 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,099评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,086评论 0 29
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,663评论 0 17
  • 网上说,如果两个人之间的对话只剩下“嗯”“哦”“啊”的语气词就可以分开了,因为彼此都倦了。 还有人说,如人饮水冷暖...
    wenny_f32a阅读 318评论 0 0