Vue2.js给对象动态添加响应式属性

Vue2.js给对象动态添加响应式属性

文档：

​​深入响应式原理​​

文档原文说

property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

但是，如果单独更新 ​​age​​字段，视图并没有发生变化

handleUpdateUserInfo() { // this.userInfo.name = 'Jack' this.userInfo.age = 23},

所以，​​userInfo.age​​​ 和文档说的一致，并不是响应式属性，而是​​userInfo.name​​ 更新了触发视图更新

添加单个响应式属性

要让age也是响应式的，动态增加响应式效果，可以使用​​this.$set​​ 方法，动态设置响应式属性

语法

// 向嵌套对象添加响应式 propertyVue.set(object, propertyName, value)

示例

handleUpdateUserInfo() { // this.userInfo.name = 'Jack' // this.userInfo.age = 23 this.$set(this.userInfo, 'age', 23)},

添加多个响应式属性

handleUpdateUserInfo() { // 创建一个新的对象 this.userInfo = { ...this.userInfo, age: 23, school: 'pku' }},

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。