vue中对象属性赋值后,页面不更新解决方案

属性值更改后,页面不更新只有一个原因,就是当前对象的属性值没有被劫持(不信的话可以自己打印对象看,有没有对应的属性set,get)

  1. 很多人当触发页面不更新bug时,就会用this.$set去触发更新,这个没问题。
  2. 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属性,并更新页面。

你可能感兴趣的:(前端)