51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

vue中新增属性视图问题

计利当计天下利,求名应求万世名------于右任

我们在进行vue前端开发的时候,可能会遇到这种情况:

首先我们此处双向绑定了一个变量中的属性

|-------------------|-------------------------------------------------------------------------------------------| | 1 2 3 4 5 | hljs vue <template> <div> <div>{{ myObject.newProperty }}</div> </div> </template> |

然后下面的data只有该对象变量,并无此属性

|-------------------------|-----------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 | hljs vue <script> export default { data() { return { myObject: {} }; } </script> |

此时我们调用一个方法,给它的新增变量赋值

|-----------|-------------------------------------------------------------| | 1 | hljs javascript this.myObject.newProperty = 'ruben'; |

可以看到外部是并未监听到,视图没有更新,导致我们页面没渲染上去该变量属性的值

此处我们当然可以使用vm.$forceUpdate去强制更新当前页面的视图,更新后固然变量成功绑定

实际上官方文档为我们提供了另一种方法:

vm.$set

该方法可以实现

向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property

简单来说,就是能将新增的变量同样给双向绑定

我们试一试:

|-----------|--------------------------------------------------------------------------| | 1 | hljs javascript this.$set(this.myObject, 'newProperty', 'ruben'); |

不错,的确更新了视图,完成了新增变量的双向绑定(懒得录制效果做gif啦)

赞(2)
未经允许不得转载:工具盒子 » vue中新增属性视图问题