对象值动态改变的问题

先上代码

data() {
    return {
      obj: {
        accountId: "1602213497733648472",
        accountName:12,
        ctime: "2022-12-12 16:07:20",
        enabled: 1,
        enabledName: "已启用",
        operatorId: "4348340",
        ownedTenant: "1602213256506642522",
        parentOrg: "",
        parentOrgName: "",
        utime: "2022-12-13 03:32:40"
      },
      arr: []
    };
  },
  mounted() {
    Object.keys(this.obj).forEach(item => {
      this.arr.push({
        item: this.obj[item]
      })
    })
    console.log('arr', this.arr)
  }

代码逻辑很简单，把obj中的属性值包装成一个一个对象，并且塞入到arr数组中。

代码这么写的时候乍一看没什么问题，动态取值，封装对象。但是console出来的结果竟然是

[{item: "1602213497733648472"}, {item: 12},···]

后面仔细想了想，之前自己在给对象重新添加属性的时候是直接这样写的

xxx.map(item => {
  return {
    ...item,
    b: 2
  };
})

这里的b不就相当于key了吗。假设要实现动态取值的效果，我该要怎么实现呢？

后面问了一下大佬，大佬给出我这样一个解决方案，成功解决了我的需求，代码如下

data() {
    ···
    ···
  },
  mounted() {
    Object.keys(this.obj).forEach(item => {
      this.arr.push({
        [item]: this.obj[item]
      })
    })
    console.log('arr', this.arr)
  }

只是在将item用[]给扩起来了，实现了效果。

原理解析

这里先空着，等我找到了答案之后再来补充，或者各位大佬知道的话，可以在下方留言