Vue更新数据后,和数据绑定的页面不更新

473 阅读1分钟

juejin.cn/post/684490…

什么情况下会出现这个问题

  • 问题一:当利用索引直接设置一个数组项时,例如:vm.items [indexOfItem] = newValue
  • 问题二:当修改数组的长度时,例如:vm.items.length = newLength

解决

1. 强制刷新页面

这种方式过于暴力,直接强制更新整个页面不推荐

this.$forceUpdate

2. 解决问题1

例如data中有个两个数据:

obj:{
    key1: "value1",
    key2: "value2",
    key3: "value3"
},

list:["value1", "value2", "value3"]

参数意义: target: 目标数据,例如: this.listthis.obj propertyName/index:目标数据中要更改那项的 属性名/索引,例如: key10 value:要更改的值,例如:value4

this.$set( target, propertyName/index, value );

this.$set( this.obj, 'key1', 'value4' )
// Vue.set 
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set,Vue.set的一个别名 
vm.$set(vm.items, indexOfItem, newValue) 
// Array.prototype.splice 
vm.items.splice(indexOfItem, 1, newValue)

3. 解决问题2

// Array.prototype.splice 
vm.items.splice(newLength)