为计算的属性 vuejs 赋值

Question

我有这个对象数组：

columnData=[
  {Address: "1 fake st"},
  {Application: "bts sport"},
  {Description: "good"},
  {Issue Date: "2012-08-09"},
  {Status: "active"},
  {Unit: null}
]

然后我想使用计算的属性将一些 columnData 元素分配给一个新的对象数组，新数组应该如下所示：

newData= [
  {
    label: "Address",
    value: "1 fake st"
  },
  {
    label: "Descripttion",
    value: "good"
  },
  {
    label: "Unit",
    value: null
  }
]

我试过这段代码，但它不起作用：

computed:{
    newData() {
      return [
        {
          label: Object.keys(this.columnData[0]),
          value: Object.values(this.columnData[0])
        },
        {
          label: Object.keys(this.columnData[2]),
          value: Object.values(this.columnData[2])
        },
        {
          label: Object.keys(this.columnData[5]),
          value: Object.values(this.columnData[5])
        }
      ];
    }
}

如何使用计算的属性按照我希望的方式创建 newData 数组？

Answer 1

您分别需要 Object.keys(obj)[0] 和 Object.values(obj)[0] 来获取数组中每个对象的第一个属性名称和值。

const columnData=[
  {Address: "1 fake st"},
  {Application: "bts sport"},
  {Description: "good"},
  {"Issue Date": "2012-08-09"},
  {Status: "active"},
  {Unit: null}
];
const newData = columnData.slice(0,2).concat(columnData[5]).map(obj=>({
  label: Object.keys(obj)[0],
  value: Object.values(obj)[0]
}));
console.log(newData);

您还可以使用 Object.entries 在一个数组中同时获取属性名称和值。

const columnData=[
  {Address: "1 fake st"},
  {Application: "bts sport"},
  {Description: "good"},
  {"Issue Date": "2012-08-09"},
  {Status: "active"},
  {Unit: null}
];
const newData = columnData.slice(0,2).concat(columnData[5]).map(obj=>{
  const [label, value] = Object.entries(obj)[0];
  return {label, value};
});
console.log(newData);

为计算的属性 vuejs 赋值

assigning values to a computed property vuejs

javascript

arrays

key

key-value

vue.js

为计算的 属性 vuejs 赋值

assigning values to a computed property vuejs

javascript

arrays

key

key-value

vue.js

为计算的属性 vuejs 赋值