Vue.js - 如何显示所有 属性 键和嵌套的 属性 值？

Question

找不到更好的标题，我的问题很难用一句话描述。我试图遍历由某些第三方包生成的导入 object，但它的结构有问题：

obj: {
  "name1": {
    "property1": "value1",
    "property2": "value2",
  },
  "name2": {
    "property1": "value3",
    "property2": "value4",
  },
  "name3": {
    "property1": "value5",
    "property2": "value6",
  }
}

我不仅要显示 property1 和 property2，还要显示它们前面的名称：

- name1
  value1
  value2

- name2
  value3
  value4

...

这是我目前的代码：

<ul>
  <li v-for="(item, i) in obj" :key="index">
    {{ item.property1 }}
    <br>
    {{ item.property2 }}
  </li>
</ul>

考虑到这个 object' 奇怪的结构，我怎样才能同时显示名称？

JSFiddle

Answer 1

用 Object.keys() 循环对象键，并用另一个 v-for

显示键中的对象值

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li v-for="(item, i) in Object.keys(obj)" :key="index">
      {{ item }}
      <ul>
        <li v-for="(property, key) in obj[item]" :key="property">
          {{ key }} -> {{ property }}
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

只需在 v-for 循环中添加 key 属性 并渲染它：

 <li v-for="(item,key, i) in obj" :key="index">
     {{key}}
      <br>
     {{ item.property1 }}
      <br>
      {{ item.property2 }}
  </li>