Unable to retrieve the API key in Nuxt framework

Question

Unable to retrieve the API key in Nuxt framework

I am fairly new to NuxtJS and have been following tutorials on it. I am having trouble displaying the {{planet.title}} on my page. However, when I use {{$data}}, I can see all the planets. I want the title of the planet's name that I have in the slug (in this case it is earth but it could be jupiter or mars)

_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>

My Web Page :

https://i.stack.imgur.com/19cy2.png

javascript vue.js nuxt.js

Answer 1

Answer №1

Here are some suggestions to enhance your code:

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">planet.title will be displayed here => {{ planet.title }}</h1>
      <pre> $data will be shown 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 fetchCall = await fetch('https://api.nuxtjs.dev/planets')
    const planets = await fetchCall.json()
    return { planets }
  }
}
</script>

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

Note: Remember to include the :key attribute.

The API response is an array. To access the title of the first planet, use planet[0].title.

You can also iterate through the entire array using v-for. For more details, visit: https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

Answer 2

Here are some suggestions to enhance your code:

<template>
  <div class="container">
    <div>
      <NuxtLogo />
      <h1 class="title">planet.title will be displayed here => {{ planet.title }}</h1>
      <pre> $data will be shown 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 fetchCall = await fetch('https://api.nuxtjs.dev/planets')
    const planets = await fetchCall.json()
    return { planets }
  }
}
</script>

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

Note: Remember to include the :key attribute.

The API response is an array. To access the title of the first planet, use planet[0].title.

You can also iterate through the entire array using v-for. For more details, visit: https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

Answer 3

Answer №2

Based on the information provided, it appears that Planet is an array that requires iteration in order to display specific values. Here is a suggested code snippet:

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

Answer 4

Based on the information provided, it appears that Planet is an array that requires iteration in order to display specific values. Here is a suggested code snippet:

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

Answer 5

Answer №3

Earth is visible in the variable $data as an array of planets.

It's advisable to change the name of the planet variable to planets, making it more descriptive of its contents.

To showcase a planet, you must retrieve it from the planets array:

<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>

Answer 6

Earth is visible in the variable $data as an array of planets.

It's advisable to change the name of the planet variable to planets, making it more descriptive of its contents.

To showcase a planet, you must retrieve it from the planets array:

<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>

Unable to retrieve the API key in Nuxt framework

Answer №1

Answer №2

Answer №3

Similar questions

Modifying the design of a website in real-time using the EXPRESS.js and NODE.js frameworks

Problem encountered with displaying a component in Laravel Nova following the completion of dependency updates

Creating an Ajax Post request for API invocation

"The fascinating world of asynchronous JavaScript: Promises and Del

PHP jQuery buttons for popovers

What methods can be used in VueJS to restrict users from entering numeric values?

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Unable to retrieve cookies from the client side | Working with NodeJS and JavaScript

Calculate the overall cost from an array of information using Vue.js and Laravel

obtaining Json format from an array: a comprehensive guide

What sets React$Element apart from ReactElement?

Looking for a substitute for iframes when using jQuery UI tabs?

Issue with Webstorm not automatically updating changes made to JavaScript files

Issue: Error encountered while trying to use the removeAttribute() function in Selenium and Java: missing closing parenthesis after argument list

What is the best way to pass a file and a string to my C# backend using JQuery Ajax?

The save button click handler is not triggering JQuery Validation

Next.js API route is showing an error stating that the body exceeds the 1mb limit

uib-datepicker-popup allowing for changing minimum mode dynamically

Node.js retrieves a single row from a JSON array with two dimensions

Unlocking Authorization in VueJS