vue中对象属性赋值后,页面不更新解决方案
vue属性值变化后,页面不更新解决方法
·
属性值更改后,页面不更新只有一个原因,就是当前对象的属性值没有被劫持(不信的话可以自己打印对象看,有没有对应的属性set,get)
- 很多人当触发页面不更新bug时,就会用this.$set去触发更新,这个没问题。
data () { return { test: {name:''} } }
如果页面绑定了一个test对象中age值,要更新到页面,直接赋值 this.test.age = 18,不会触发更新。
这时候你可以打印一下this.test点开发现,age没被劫持。
解决方法1:通过this.$set(this.test,'age',18)
能更新,再打印this.test 发现age还是没被劫持,页面是更新了。如果test是通过props传进来的,通过this.$set只会触发当前组件的更新,并不能触发父组件的更新。
解决方法2:this.test = {name:'',age:18}
,这种方式会触发test对象下所有属性的劫持,包括age属性,并更新页面。
更多推荐
已为社区贡献1条内容
所有评论(0)