对象中的 Nuxt/Vue 访问对象

Question

我也在尝试在“标准”for 循环中遍历 IndexCategories。 如果我这样做，并尝试访问 url 属性，在 Image 属性中，我得到： url 未定义。

这是我尝试过的：

<div v-for="(cat, index) in IndexCategories" :key="index">
{{cat.Title}} --> this does work fine.
{{cat.Image.url}} --> this does not work.
{{cat.Image}} --> this does print out all of the image object, unparsed.
</div>

这是给我的，url 是未定义的，即使它在那里。 id 或 name 属性也是如此。 一切都包含在一个 try catch 中，使用 await 方法，我也在检查状态是否处于挂起状态。

api数据如下：

"IndexCategories": [
    {
      "id": 1,
      "Title": "Laptop",
      "Image": {
        "id": 10,
        "name": "laptop.png",
        "alternativeText": "",
        "caption": "",
        "width": 260,
        "height": 163,
        "formats": {
          "thumbnail": {
            "name": "thumbnail_laptop.png",
            "hash": "thumbnail_laptop_debb5c2788",
            "ext": ".png",
            "mime": "image/png",
            "width": 245,
            "height": 154,
            "size": 3.88,
            "path": null,
            "url": "/uploads/thumbnail_laptop_debb5c2788.png"
          }
        },
        "hash": "laptop_debb5c2788",
        "ext": ".png",
        "mime": "image/png",
        "size": 1.88,
        "url": "/uploads/laptop_debb5c2788.png",
        "previewUrl": null,
        "provider": "local",
        "provider_metadata": null,
        "created_at": "2021-04-06T17:59:16.000Z",
        "updated_at": "2021-04-06T17:59:16.000Z"
      }
    },
    {
      "id": 2,
      "Title": "Mac",
      "Image": {
        "id": 12,
        "name": "mac.png",
        "alternativeText": "",
        "caption": "",
        "width": 260,
        "height": 163,
        "formats": {
          "thumbnail": {
            "name": "thumbnail_mac.png",
            "hash": "thumbnail_mac_5d35856985",
            "ext": ".png",
            "mime": "image/png",
            "width": 245,
            "height": 154,
            "size": 2.7,
            "path": null,
            "url": "/uploads/thumbnail_mac_5d35856985.png"
          }
        },
        "hash": "mac_5d35856985",
        "ext": ".png",
        "mime": "image/png",
        "size": 1.37,
        "url": "/uploads/mac_5d35856985.png",
        "previewUrl": null,
        "provider": "local",
        "provider_metadata": null,
        "created_at": "2021-04-06T17:59:16.000Z",
        "updated_at": "2021-04-06T17:59:16.000Z"
      }
    },
}

完整代码：

    <template>
<p class="grid-small margin-center" v-if="$fetchState.pending">Wait for it</p>
<p class="grid-small margin-center" v-else-if="$fetchState.error">Could not fetch</p>
        <div class="index" v-else>
    <nuxt-link to="/" class="border p-4 text-center min-h-2" v-for="cat in indexData.IndexCategories">
                        <span>{{cat.Title}}</span>
                        {{cat.Image.url}}
                    </nuxt-link>
        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                    indexData: [],
                }
            },
            async fetch() {
    
                try {
                    this.indexData = await fetch(
                        process.env.apiUrl + '/Index'
                    ).then(res => res.json());
                } catch (e) {
                    console.log(e)
                }
            }
        }
    </script>

Answer 1

这不是Vue 或Nuxt 的问题，而是fetch 在JavaScript 中的工作方式：如果您使用的是fetch，您也必须解开json()：

不同结果的片段：

const url = 'https://jsonplaceholder.typicode.com/todos/1';

// Function #1 - no result
(async function() {
  const response = await fetch(url)
  const json = response.json()
  console.log('json1:', json) // expected: json1: {}
})();

// Function #2 - expected result
(async function() {
  const response = await fetch(url)
  const json = await response.json()
  console.log('json2:', json) // expected: json2: {/* object */}
})();

您的代码

您的代码现在就像上面的Function #1。你应该改成这样：

async fetch() {
  try {
    const response = await fetch(process.env.apiUrl + '/Index')
    const json = await response.json()
    this.indexData = json
  } catch (e) {
    console.log(e)
  }
}

使用.then() 你不是awaiting res => res.json()。

---

建议

尽量不要混用await和Promise-.then()。尽管await 只是Promise 上的“语法糖”，但它们提供了不同的代码（ing）可能性，并且很容易忘记你在做什么:)