vue- Vue.$set()的用法给一个已知的数组里面套对象，添加一个新的属性

最新推荐文章于 2025-03-12 10:37:13 发布

前端菜鸡日常丶

最新推荐文章于 2025-03-12 10:37:13 发布

阅读量1.2w

点赞数 3

分类专栏： vue项目遇到的一些问题文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_36770338/article/details/107098176

版权

vue项目遇到的一些问题专栏收录该内容

1 篇文章

订阅专栏

一个对象添加一个属性

在做项目的时候遇到一个这个的问题，这里我举例一下，已知一个数组套对象的数据，需要在这里面添加一个属性，和属性值，在通过这个属性值来判断显示或者不显示

// 数据
aaa: [
  {bbb: 111,lll:"第一个"},
  {bbb: 222,lll:"第二个"},
  {bbb: 333,lll:"第三个"},
  {bbb: 444,lll:"第四个"},
  {bbb: 555,lll:"第五个"},
  {bbb: 666,lll:"第六个"}
]

通过给已知的对象中添入一个新的属性: hidden，来判断显示或者不显示

<div class="wapper">
    <div v-for="(item,i) in aaa" @click="chuf(i)">
      <span>{{item.bbb}}</span>
      <div v-show="item.hidden">{{item.lll}}</div>
    </div>
  </div>

在钩子函数 created 来更新数据的添加一个新的键值对
ps：
created ：处于 loading 结束后，还做一些初始化，实现函数自执行（ data 数据已经初始化，但是 DOM 结构渲染完成，组件没有加载）

 created() {
      for (var i = 0; i < this.aaa.length; i++) {
         // 第一种方法
        // var b ={ hidden:true }
        // Object.assign(this.aaa[i], b)
        //第二种
        this.$set(this.aaa[i],'hidden',true)
      }
    }

1.我原来想的方法是创建一个对象，用 es6 的 Object.assign() 方法合并一下
2.但是添加到对象上的新属性不会触发更新。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
3.所以使用this.$set的方法。

vm.$set 实例方法，这也是全局 Vue.set 方法的别名

ps：
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

触发添加属性的方法

//方法  点击变化 显示 隐藏
chuf(i) {
  console.log(i)
    this.aaa[i].hidden = !this.aaa[i].hidden
     console.log(this.aaa[i].bbb)
        console.log(this.aaa[i].hidden)
}