Why axios request not working inside vuejs (nuxt.js) methods

Question

I have installed axios inside my nuxt.js application. Here my configuration file code:

File: nuxt.config.js

modules: [
  '@nuxtjs/vuetify',
  '@nuxtjs/axios',
],

axios: {
  // proxyHeaders: false
}

Here my example working code:

export default {
  data() {
    return {
      ip: ''
    }
  },
  async asyncData({ $axios }) {
    const ip = await $axios.$get('http://icanhazip.com')
    return { ip }
  }
}

And here my not working code:

export default {
  data() {
    return {
      ip: ''
    }
  },
  methods: {
    async asyncData() {
      const ip = await this.$axios.$get('http://icanhazip.com')
      this.ip = ip
    }
  } 
}

Why inside methods axios request not working?

When are you calling the method?

Michael
– Michael

2019-06-19 13:45:10 +00:00
Commented Jun 19, 2019 at 13:45 — Michael
– Michael, Commented Jun 19, 2019 at 13:45

Andrew1325 · Accepted Answer · 2019-06-19 22:12:50Z

1

You cannot call asyncData in you methods object. asyncData is for pre rendering only.

Rename your function to something else and it should be fine:

export default {
  data() {
    return {
      ip: ''
    }
  },
  methods: {
    async getData() {
      const ip = await this.$axios.$get('http://icanhazip.com')
      this.ip = ip
    }
  } 
}

Also when you are using asyncData as in your top example, you should not initialise "ip" in your data function. What is returned from asyncData is merged into data anyway.

answered Jun 19, 2019 at 22:12

Andrew1325

3,5691 gold badge18 silver badges25 bronze badges

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

Comments

Navaneeth Vijay · Accepted Answer · 2019-06-25 02:35:03Z

0

AsyncData method will be called everytime before loading the page also note that asyncdata is only available in page component in nuxt. You don't have access to the component instance through this inside asyncData because it is called before initiating the component. You can use the returned data from asyncData data in your template without initialising in your data.

Nuxt asyncData

answered Jun 25, 2019 at 2:35

Navaneeth Vijay

3262 silver badges4 bronze badges

Collectives™ on Stack Overflow

Why axios request not working inside vuejs (nuxt.js) methods

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related