使用splice修改数组数据 数据被修改了 但是页面视图不更新

场景

<el-tag
  v-for="(tag, index) in arr"
  :key="tag"
  :closable="true"
  @close="onClose(index, $event)"
>
  {{ tag }}
</el-tag>

// 标签关闭时触发
    onClose(index, e) {
      console.log("标签关闭", index);
      this.arr.splice(index, 1);
      console.log('this.arr',this.arr); // 此处打印出来的arr的确是删除之后的，也就是说数据是有更新的，只是视图没有
    },

在对已有数据进行删除时，js数据操作返回的数组是被正常删除的，但是页面dom没有实时更新渲染，一直保持原样，vue官方给出的动态渲染函数中，包含了splice()函数，在此处依然不生效

解决

后在splice()操作后面加上视图更新this.$forceUpdate();才解决，如下

// 标签关闭时触发
    onClose(index, e) {
      console.log("标签关闭", index);
      this.arr.splice(index, 1);
      this.$forceUpdate(); // 视图更新
    },

原文