Question

我正在尝试遍历以下JSON：

[ { "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:378.2608642578125,328.9855041503906,147.82611083984375,210.14492797851562", "type": "FragmentSelector" } }, "photoDocId": "92wNwz2aaqy7CWf3mGo1", "body": [ { "value": "new annotation", "purpose": "commenting", "type": "TextualBody" }, { "purpose": "tagging", "type": "TextualBody", "value": "error" } ], "id": "698RTBGMwWahQ15rXbe6", "type": "Annotation", "@context": "http://www.w3.org/ns/anno.jsonld" }, { "photoDocId": "92wNwz2aaqy7CWf3mGo1", "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:695.6521606445312,60.869564056396484,139.13043212890625,127.53622817993164", "type": "FragmentSelector" } }, "id": "AUMwWBjizjl8L8vU0XtA", "@context": "http://www.w3.org/ns/anno.jsonld", "type": "Annotation", "body": [ { "value": "clouds!", "type": "TextualBody", "purpose": "commenting" }, { "type": "TextualBody", "value": "clouds", "purpose": "tagging" } ] }, { "type": "Annotation", "body": [ { "type": "TextualBody", "value": "fourth anno", "purpose": "commenting" } ], "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "type": "FragmentSelector", "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:631.884033203125,389.8551025390625,172.4637451171875,128.9854736328125" } }, "@context": "http://www.w3.org/ns/anno.jsonld", "id": "CecyGAt47krNIOPgk8Su", "photoDocId": "92wNwz2aaqy7CWf3mGo1" }, { "photoDocId": "92wNwz2aaqy7CWf3mGo1", "body": [ { "type": "TextualBody", "purpose": "commenting", "value": "mountain top . Anyone ever climbed this?" }, { "value": "mountain", "type": "TextualBody", "purpose": "tagging" } ], "@context": "http://www.w3.org/ns/anno.jsonld", "id": "KxIMdih1fTSULjde3Ay4", "type": "Annotation", "target": { "selector": { "type": "FragmentSelector", "value": "xywh=pixel:272.4637756347656,60.869564056396484,252.17391967773438,185.50725173950195", "conformsTo": "http://www.w3.org/TR/media-frags/" }, "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0" } } ]

我只想返回以下值：

purpose，type和value。它们位于body

的clientAnnos数组内

在v-for循环中需要v-for吗？

更新：我尝试过：

<ul>
  <li v-for="{ body, index } in clientAnnos" :key="index">
    {{ body }}
  </li>
</ul>

但是我想知道是否由于索引变量没有真实ID而可能存在更新问题。

Answer 1

您可以尝试映射数据，然后遍历正文，因为正文是数组。例如，您可以使用一种方法

methods: {
  info() {
    let required = this.data.map(d => d.body)
    return required
  }
 }

然后将博客用作v中的数据值。该方法将返回主体数组属性的数组

<li v-for="{ body, index } in info" :key="index">
   {{ body }}
</li>

我希望它能对您有所帮助...

大海捞针：如何通过计算属性从对象数组中获取价值？

1 个答案: