解决vue修改数据页面不更新;vue监听不到数据变化;vue打印有值页面无数据

227 阅读1分钟

问题

1、 修改数据页面不更新; 2、 vue监听不到数据变化; 3、vue打印有值页面无数据

场景

场景1:修改data中数据,原先没有声明此时使用this.$set
只有使用this.$set(目标对象,属性,值) 数据才是动态双向绑定的

image.png

场景2: console.log打印有值,但是页面和data中并没有值,此时用$nextTick(()=>{})

this.$nextTick(() => { 
   this.obj.a = 'a' 
})

情景3:使用 this.$forceUpdate()迫使Vue 实例重新渲染

情景4:如果都无效,那么将上方的糅合嵌套使用

   this.$nextTick(() => {
      	this.obj.a = 'a'
      	this.obj.timeDate = + new Date() // 最好给原数据里就先声明个 timeDate 然后改值触发obj监听
          this.$forceUpdate()
      })