美文网首页
Vue-Element之数据赋值与重置

Vue-Element之数据赋值与重置

作者: 晔子与Bug的战斗史 | 来源:发表于2017-10-06 14:43 被阅读0次
  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之数据赋值与重置

    父组件传递给子组件的对象变量,不能直接赋值或通过计算属性给子组件的变量赋值。因为对象的特性,直接赋值会使得子组件中...

  • Vue-Element之form表单重置

    正确写法 将完整的对象赋值给目标变量,而后再依据条件修改属性值先定义对象,后给对象添加属性会导致对象的属性读取不到...

  • Python第一课

    定义、赋值与变量 定义:按照Python规定的格式,将数据的数据类型告知Python 赋值:将定义好的数据,传递给...

  • Mac图标重置

    重置Dock图标库 重置 Launchpad 图标数据库

  • ES6文集的目录

    基础 变量的解构赋值扩展运算符箭头函数export与import 数据类型 引用数据类型 ES6的数组数组之Arr...

  • vue 常用的 备忘

    重置 data 里的数据

  • Python学习记录

    变量、运算符与数据类型 注释: 运算符 变量和赋值 数据类型与转换

  • 房间费用配置第一项被重置,每次都要重新配置

    问题:房间费用配置第一项被重置 原因:DlgServerWizard.cpp中将第一项重新赋值为默认值 此处赋值为...

  • (vue)更新数据时,强制刷新组件

    很多时候,通过重置数据将页面重置时,子组件可以提供重置的方法,或者提供props重置自己的状态。但是相对麻烦,那可...

  • 学习小组Day5笔记--任重道远

    向量# 赋值## 提取## 位置### 大小### 数据框# 读取本地数据## 行名列名## 导出## 保存与重新...

网友评论

      本文标题:Vue-Element之数据赋值与重置

      本文链接:https://www.haomeiwen.com/subject/dymlyxtx.html