Nuxt.js - 无法在 Nuxt.js 数组中输出嵌套数组元素答案

【问题标题】：Nuxt.js - Unable to output nested array elements in Nuxt.js arrayNuxt.js - 无法在 Nuxt.js 数组中输出嵌套数组元素
【发布时间】：2021-07-22 03:07:54
【问题描述】：

我有 json 对象，但我无法输出嵌套数组，真的需要一些帮助！

这是我的脚本标签：

<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.knack.com/v1/objects/object_2/records'
      , {
  method: "GET",
  headers: {
    "X-Knack-Application-Id": "appIDhere",
    "X-Knack-REST-API-KEY": "keyIDhere",
  },
}).then(res => res.json())
  //     .then((res) => {
  //   console.log(res);
  // })
    }
  }
</script>

它在我的控制台中给了我：

{
  "id": "60f648317f54bf001f516226",
  "field_77_raw": {
    "id": "60f6479f6bcca0001e7ebf28",
    "application_id": "60da978576b89a001fbc7e36",
    "s3": true,
    "type": "image",
    "filename": "screenshot20210625at1.38.44pm.png",
    "url": "https://s3-ap-southeast-2.amazonaws.com/ap-southeast-2-assets.knack.com/assets/60da978576b89a001fbc7e36/60f6479f6bcca0001e7ebf28/original/screenshot20210625at1.38.44pm.png",
    "thumb_url": "https://s3-ap-southeast-2.amazonaws.com/ap-southeast-2-assets.knack.com/assets/60da978576b89a001fbc7e36/60f6479f6bcca0001e7ebf28/thumb/screenshot20210625at1.38.44pm.png",
    "size": 2621440,
    "field_key": "field_77"
  },

但是当我在模板部分执行循环时，我不能使用 thumb_url：

<template>
 <div v-for="mountain of mountains.records">
      {{mountain.id}}
      {{mountain.field_77_raw.url}}
 </div>
</template>

我刚刚收到一条消息：无法读取未定义的属性“url”

如果我输入{{mountain.field_77_raw}}，我会得到：

{ "id": "60f6479f6bcca0001e7ebf28", "application_id": "60da978576b89a001fbc7e36", "s3": true, "type": "image", "filename": "screenshot20210625at1.38.44pm.png", "url": "https://s3-ap-southeast-2.amazonaws.com/ap-southeast-2-assets.knack.com/assets/60da978576b89a001fbc7e36/60f6479f6bcca0001e7ebf28/original/screenshot20210625at1.38.44pm.png", "thumb_url": "https://s3-ap-southeast-2.amazonaws.com/ap-southeast-2-assets.knack.com/assets/60da978576b89a001fbc7e36/60f6479f6bcca0001e7ebf28/thumb/screenshot20210625at1.38.44pm.png", "size": 2621440, "field_key": "field_77" }

但不知道如何遍历这个嵌套数组。我认为它是一个对象，所以可能我只是不知道如何处理一个对象......

谢谢！

编辑：

这是整个json输出https://codepen.io/MikedNZ/pen/JjNrJgV

回答感谢@tony19

<template>
    <div>
        <div v-for="mountain of mountains.records">
            {{mountain.id}}
        </div>
        <div v-if="mountain.field_77_raw">. 
            {{mountain.field_77_raw.url}}
        </div>
    </div>
</template>

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

您发布的 JSON 响应有 8 个没有 field_77_raw 的数组元素，因此您的模板需要有条件地使用 v-if 呈现该字段。

另外，我在数据中看不到 records 键。如果 API 响应只是一个数组，您会将响应直接分配给 this.mountains，因此 v-for 应该迭代 mountains（而不是 mountains.records）。

<div v-for="mountain of mountains">
  {{mountain.id}}
  <template v-if="mountain.field_77_raw">
    {{mountain.field_77_raw.url}}
  </template>
</div>

demo

【讨论】：