如何使用 v-for 索引循环显示嵌套的 json 数组

Question

我有 JSON 具有以下结构的数组

    items: [
     {
      ID: 11,
      UserID: "test.com",
      UserRole: "user",
      timeStamp: "2021-03-23T15:54:02.125578",
      dialogs: [
        {
          "Bot": "Why is data missing?",
          "test.com": "not available",
          "Bot": "please enter ID",
          "test.com": "1234"

        }
      ]
    }
  ]

我必须将对话框中的元素显示为列表。我正在使用 v-for 但对话框显示为带逗号的数组。我怎样才能用索引显示这个？以下是我正在使用的 v-for 循环

    <ul v-for="item  in items" :key="item">
        <li v-for="(dialog, index) in dialogs" :key="index">{{key}}: {{dialogs}}</li>
    </ul>

Answer 1

 <ul v-for="item  in items" :key="item">
      <li v-for="(dialog, index) in item.dialogs" :key="index">{{index}}: {{dialog}}</li>
  </ul>

Answer 2

需要进行 2 处更改。

在您的 dialogs 中，您有重复的键，因此需要将它们分成两个不同的对象。
在你的 HTML 部分你需要循环为 items.dialogs

这是完整的代码。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    items: [
     {
      ID: 11,
      UserID: "test.com",
      UserRole: "user",
      timeStamp: "2021-03-23T15:54:02.125578",
      dialogs: [
        {
          "Bot": "Why is data missing?",
          "test.com": "not available",
          },
          
          {"Bot": "please enter ID",
          "test.com": "1234"
        }
      ]
    }
  ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <ul v-for="(item, index) in items" :key="item">
     <li v-for = "(data, index) in item.dialogs"> 
 {{data}}  {{index}}</li>
    </ul>
</div>

如何使用 v-for 索引循环显示嵌套的 json 数组

How to display nested json array with v-for index loop

javascript

arrays

json

vue.js

v-for