明明 console 发现值已经变化了,但是页面却始终没有更新。

<div
  v-for="(item, idx) in items" 
  :key="idx" 
  @click="onClick"
>
  <span :value="item" />
</div>

计算属性中的代码

data() {
  return {
    items: [1, 2],
  }
}

methods中改变计算属性的方法`

onClick(index){
    this.$set(this.items, index, this.items[index]+1);
},
  • this.$set() 的作用可以让值变成和 data 中的值一样,是响应式的;
  • datareturn 的所有值都是经过 Object.defineProperty() 处理过的,但是 vue 中不支持数组下标的更改。
  • vue 中对数组的 api 进行了重写,所以可以使用 splice 等方法也是可以的。

总结:写 vue 的时候,我们需要的值,最好都定义到 data 中,这样可以避免不必要的麻烦;还有一种方法是 this.$forceUpdate() 可以强制刷新页面,不过并不建议用到这个方法,合理的代码也是不需要用到的。

Logo

前往低代码交流专区

更多推荐