Why does it does not return any data when using Async with Axios in Nuxt?

Question

I dont get any of the data in my list. When I use the fetch it works (please see the comment code in the script tag), but not when I use the axios.

Here is the code:

<template>
  <div>
    <ul>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mountains: [],
    };
  },
  /*async fetch() {
    this.mountains = await fetch(
      "https://api.nuxtjs.dev/mountains"
    ).then((res) => res.json());
  }, */
  async asyncData() {
    const mountains = await axios.get(`https://api.nuxtjs.dev/mountains`);
    return { mountains };
  },
};
</script>

JSON from https://api.nuxtjs.dev/mountains

Ilijanovic · Accepted Answer · 2020-10-06 15:34:54Z

1

Try not to destructure the response

async asyncData() {
  const mountains = await axios.get(`https://api.nuxtjs.dev/mountains`);
  return { mountains };
},

answered Oct 6, 2020 at 15:34

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Isak La Fleur Over a year ago

it still does not work... It just return one empty array [] when I print out {{ mountains }}

Ilijanovic Over a year ago

You actually dont need data()

Isak La Fleur · Accepted Answer · 2020-10-06 18:15:54Z

1

In the help documents of Nuxt Axios I found out you need to add $axios as a parameter and add a $ before axios and get. See code below:

  async asyncData({ $axios }) {
    const mountains = await $axios.$get(`https://api.nuxtjs.dev/mountains`);
    return { mountains };
  },

Now it works perfect!

answered Oct 6, 2020 at 18:15

Isak La Fleur

4,6888 gold badges37 silver badges54 bronze badges

Collectives™ on Stack Overflow

Why does it does not return any data when using Async with Axios in Nuxt?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related