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

【问题标题】：Vue.js - How to display all property keys and nested property values?Vue.js - 如何显示所有属性键和嵌套属性值？
【发布时间】：2020-12-01 09:24:02
【问题描述】：

找不到更好的标题，我的问题很难用一句话来描述。我正在尝试遍历某个第三方包生成的导入对象，但其结构存在问题：

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>

鉴于此对象的奇怪结构，我如何也显示名称？

JSFiddle

【问题讨论】：

标签： vue.js object vuejs2 vue-component v-for

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

用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>

【讨论】：