vue双向绑定不起作用神坑


神坑描述:

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

规避方法:

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

双向绑定二级属性
仅声明一级属性
// 此方式首次赋值(页面刚打开或刷新后首次赋值) 有问题
this.people.name = "李四";

// 规避方法一(可能覆盖掉一些需要初始化的数据)
this.people = {name: "李四"};

// 规避方法二,推荐(无副作用)
this.$set(this.people, 'name', '李四')

// 规避方法三(无副作用)
let oldEntity = JSON.parse(JSON.stringify(this.people));
Object.assign(oldEntity, newPeople);
this.people = oldEntity;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容