美文网首页VUE
vue双向绑定不起作用神坑

vue双向绑定不起作用神坑

作者: 芷梦风 | 来源:发表于2019-04-03 10:53 被阅读0次

    神坑描述:

    前端vue在做双向绑定时,如果采用的是 二级属性绑定 ,并且在声明时 仅声明了一级属性,那么在这种情况下,如果 首次赋值 不是通过页面交互录入,而是 通过程序赋值 ,并且赋值时采用直接给二级属性单独赋值 ,就会产生双向绑定失效的情况;

    规避方法:

    采用直接给一级属性赋值的方式即可规避此坑,如果一级属性绑定有大量需要初始化的二级属性,那么可以通过Object.asign增量的方式赋新值;

    双向绑定二级属性 仅声明一级属性
    
    // 此方式首次赋值(页面刚打开或刷新后首次赋值) 有问题
    
    this.people.name = "李四";
    
    // 规避方法一
    
    this.people = {name: "李四"};
    
    // 规避方法二(方法一可能覆盖掉一些需要初始化的数据)
    
    let oldEntity = JSON.parse(JSON.stringify(this.people));
    
    Object.assign(oldEntity, newPeople);
    
    this.people = oldEntity;
    
    

    相关文章

      网友评论

        本文标题:vue双向绑定不起作用神坑

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