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

Posted 2023-02-16

【中文标题】Vue.js - 如何显示所有属性键和嵌套属性值？

【英文标题】：Vue.js - How to display all property keys and nested property values?

【发布时间】：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

【参考方案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>