将值分配给计算属性 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);