美文网首页
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之数据赋值与重置

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