VueJS：当对象的属性可变时，我将如何遍历对象数组答案

【问题标题】：VueJS: How will I loop through an array of objects, when the properties of the object is variableVueJS：当对象的属性可变时，我将如何遍历对象数组
【发布时间】：2021-11-20 06:34:51
【问题描述】：

我有一个对象数组，我想循环并显示为矩阵。但是，该对象的属性不会是固定的，可能会不时发生变化。

像这样

[
  {
    location: "Japan",
    webhookStatus: "Up",
    authenticationStatus: "Down",
    indexingStatus: "Under Maintenance"
  },
  {
    location: "USA",
    webhookStatus: "Up",
    indexingStatus: "Under Maintenance"
  },
  {
    location: "Japan",
    webhookStatus: "Up",
    authenticationStatus: "Up",
    indexingStatus: "Down"
  },
  {
    location: "Japan",
    webhookStatus: "Up",
    authenticationStatus: "Down",
    indexingStatus: "Under Maintenance",
    databaseStatus: "Down"
  }
]

我需要将它显示在矩阵显示器上，如网格或表格。

我可以使用 v-for 遍历数组，但我还需要遍历对象的属性和值，即使它会不时发生变化。

任何想法将不胜感激

【问题讨论】：

那么就是做一个嵌套的v-for：不应该做你想要实现的吗？ v-for 支持array 和object 迭代

标签： html css vue.js vuejs3

【解决方案1】：

您可以使用Object.entries() 将对象中的条目作为数组返回。

所以，你可以在 javascript 中使用

Object.entries(obj).forEach(entry => {
  const [key, value] = entry;
  console.log(key, value);
});

在 vue 中使用 v-for 你可以编写类似的东西

<div v-for="(key, value, index) in Object.entries(obj)">
{{ index }} {{ key }} {{ value }}
</div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

【讨论】：