无法从 Nuxt 中的 API 访问密钥 [重复]答案

【问题标题】：Cannot access key from an API in Nuxt [duplicate]无法从 Nuxt 中的 API 访问密钥 [重复]
【发布时间】：2021-12-08 07:58:54
【问题描述】：

我是 Nuxt JS 的新手。我填写了关于 nuxt js 的教程，但我无法在我的页面上显示 {{planet.title}}。但是如果我使用 {{$data}} 我会看到所有的行星。我想要我在蛞蝓中的行星名称的标题（这里是地球，但它可以是木星或火星）

_slug.vue

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">planet.title here => {{ planet.title }}</h1>
      <pre> $data here => {{ $data }}</pre>
    </div>
  </div>
</template>

<script>
import NuxtLogo from "~/components/NuxtLogo";
export default {
  components: {NuxtLogo},
  async asyncData() {
    const planet = await fetch(
      'https://api.nuxtjs.dev/planets'
    ).then((res) => res.json())
    return { planet }
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

我的网页：

【问题讨论】：

您实际上并不需要在 Nuxt 中导入组件，如下所示：nuxtjs.org/tutorials/… 另外，尽量不要混合搭配 async/await 和 .then()。继续使用async/await。
您可以使用代码的第二个 sn-p 检查我的答案。它本质上是展示如何从 API 中获取特定 ID。

标签： javascript nuxt.js

【解决方案1】：

这是改进代码的方法

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">planet.title here => {{ planet.title }}</h1>
      <pre> $data here => {{ $data }}</pre>
      <section>
        <div v-for="planet in planets" :key="planet.slug">
            <p>Title of my planet: {{ planet.title }}</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData() {
    const call = await fetch('https://api.nuxtjs.dev/planets')
    const planets = await call.json()
    return { planets }
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

PS：别忘了:key。

API 返回一个数组。如果要访问第一颗行星的title，请使用planet[0].title。

您当然也可以使用v-for 循环整个数组。更多信息在这里：https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

【讨论】：

我想在 slug 中显示我拥有的行星名称的标题
@NolanRassant 您需要为此提供特定的 API 端点。在这里，您有一个获取所有行星的端点。您需要为特定的一个。
我不明白，我按照这个教程：explorers.netlify.com/learn/get-started-with-nuxt/…。她可以显示行星标题而我不能
实际链接为您提供了使其工作所需的确切代码。跟随视频直到最后。或者查看我的回答here。

【解决方案2】：

看起来 Planet 是一个数组，因此您需要遍历该数组，然后打印该数组所需的值并尝试使用

<ul>
  <li v-for="item in planets">
    {{ item.title}}
  </li>
</ul>

【讨论】：

【解决方案3】：

planet 正如您在显示变量时看到的那样，$data 是一个行星数组。

您应该将planet 变量重命名为planets，以便更好地代表其内容。

要显示行星，您需要从 planets 数组中获取它：

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">earth.title here => {{ earth.title }}</h1>
    </div>
  </div>
</template>

<script>
import NuxtLogo from "~/components/NuxtLogo";
export default {
  components: {NuxtLogo},
  async asyncData() {
    const planets = await fetch('https://api.nuxtjs.dev/planets')
        .then((res) => res.json())

    const earth = planets[0];

    return { planets, earth }
  }
}
</script>

【讨论】：