首页 > 解决方案 > 如何使用 v-for 索引循环显示嵌套的 json 数组

问题描述

我有具有以下结构的 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>

标签: javascriptarraysjsonvue.jsv-for

解决方案


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

推荐阅读