Scenario: Vue is two-way data binding, so when the data is modified, the page should also change, but occasionally
1. Vue modifies the data and the page does not update, even if the data changes, but the page rendering does not change.
2. Or vue cannot monitor the data change;
3. Vue prints the page with value but no data arrives
Scenario 1. The modified data is not declared before, so use this.$set
data () {
return {
obj:{
a:1
}
}
}
this.obj.b = 2 // 原先就没有b这个属性 即使赋值 页面也不会渲染
只有使用this.$set(目标对象,属性,值) 数据才是动态双向绑定的
this.$set(this.obj , 'b', 2)
Scenario 2: Use this.$nextTick . This situation is aimed at clearly printing console.log values. The page has no value, and the data viewed by vue does have no value. At this time use the following package
this.$nextTick(() => {
this.obj.a = 'a'
})
Scenario 3. Use
this.$forceUpdate()
to force the Vue instance to re-render
Scenario 4. If none of them are valid, then use the above blending and nesting
this.$nextTick(() => {
this.obj.a = 'a'
this.obj.timeDate = + new Date() // 最好给原数据里就先声明个 timeDate 然后改值触发obj监听
this.$forceUpdate()
})