VUE:data中数据改变页面没渲染 | 您所在的位置:网站首页 › data没有数据怎么办 › VUE:data中数据改变页面没渲染 |
在写代码过程中,有时会出现修改了data中某个Obj后,改变页面却没有重新渲染的情况。
例如: {{testObj}} data() { return { testObj: { name: '张三' } } }, methods: { add() { this.testObj.age = '18岁' } }在方法 add()执行后 testObj 并没有渲染出 age 原因: Vue在创建页面时,会先遍历 data 中的数据,并为它们设置 getter 和 setter方法,以此作为实现数据双向绑定的基础。 但是,testObj 在声明时并没有 age 属性。 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 解决方案: Vue.set(object, key, value) 使用set方法为对象添加属性 add() { this.$set(this.testObj, 'age', '18岁') }使用set方法后,Vue会先为新增加的属性添加 getter 和 setter方法,并且重新渲染数据 this.$forceUpdate() 强制刷新 data并重新渲染 add() { this.testObj.age = '18岁' this.$forceUpdate() }并不太推荐使用这种方式,频繁使用可能会出现页面闪烁 |
CopyRight 2018-2019 实验室设备网 版权所有 |