【推荐!!!】vue修改数据页面不更新;vue监听不到数据变化;vue打印有值页面无数据;this.$set ; this.$nextTick ; this.$forceUpdate
vue修改数据页面不更新;this.$set;this.$nextTick; this.$forceUpdate
·
场景:vue是双向数据绑定的,那么在修改data数据时候,页面也应该是变化的,但是偶尔会遇到
1.vue修改数据页面不更新,既data数据变化了,但是页面渲染没变化。
2.或者vue监听不到数据变化;
3.vue打印有值页面无数据到
情景一、修改的data数据,原先没声明,使用this.$set
data () {
return {
obj:{
a:1
}
}
}
this.obj.b = 2 // 原先就没有b这个属性 即使赋值 页面也不会渲染
只有使用this.$set(目标对象,属性,值) 数据才是动态双向绑定的
this.$set(this.obj , 'b', 2)
情景二、使用this.$nextTick,这种情况针对明明console.log打印有值。页面却没有值,看vue查看的data数据也确实没有值。此时使用下方包裹
this.$nextTick(() => {
this.obj.a = 'a'
})
情景三、使用
this.$forceUpdate()
迫使Vue 实例重新渲染
情景四、如果都无效,那么将上方的糅合嵌套使用
this.$nextTick(() => {
this.obj.a = 'a'
this.obj.timeDate = + new Date() // 最好给原数据里就先声明个 timeDate 然后改值触发obj监听
this.$forceUpdate()
})
更多推荐
已为社区贡献14条内容
所有评论(0)