Vue中this.$set的用法

最新推荐文章于 2025-06-27 02:13:56 发布

原创最新推荐文章于 2025-06-27 02:13:56 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue 专栏收录该内容

26 篇文章

订阅专栏

这篇博客探讨了在Vue.js中如何使用`this.$set`方法来更新数组对象并确保视图刷新。通过示例展示了如何遍历数组，找到特定ID的元素并修改其`chenck`字段为`false`，从而实现前端状态管理并触发页面重新渲染。这种方法对于处理响应式数据和避免 Vue 的观测陷阱至关重要。

this.$set( target, key, value）
target：表示数据源，即是你要操作的数组或者对象
key：要操作的的字段
value：更改的数据

例如
removeId 取的是id,然后对 this.MUbanList.数组进行操作
this.MUbanList[b].chenck = 'false’此字段只有前台进行添加操作
这样的写法是针对数组集合操作方可数据改变页面进行渲染

let removeId = localStorage.getItem('RemoveContentID')
      for (let b = 0; b < this.MUbanList.length; b++) {
        if (this.MUbanList[b].id == removeId) {
          this.MUbanList[b].chenck = 'false'
          this.$set(this.MUbanList, b, this.MUbanList[b])
        }
      }