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

Why Axios Request Not Working Inside Vuejs (Nuxt.js) Methods

We Are Going To Discuss About Why axios request not working inside vuejs (nuxt.js) methods. So lets Start this Article.

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

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

You can’t name asyncData in you methods object. asyncData is for pre rendering solely.
Rename your operate to one thing else and it needs to be positive:
export default { knowledge() { return { ip: '' } }, methods: { async getData() { const ip = await this.$axios.$get('http://icanhazip.com') this.ip = ip } } }
Also if you end up utilizing asyncData as in your high instance, you need to not initialise “ip” in your knowledge operate. What is returned from asyncData is merged into knowledge anyway.

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

You can’t name asyncData in you methods object. asyncData is for pre rendering solely.
Rename your operate to one thing else and it needs to be positive:
export default { knowledge() { return { ip: '' } }, methods: { async getData() { const ip = await this.$axios.$get('http://icanhazip.com') this.ip = ip } } }
Also if you end up utilizing asyncData as in your high instance, you need to not initialise “ip” in your knowledge operate. What is returned from asyncData is merged into knowledge anyway.

READ :  [Solved] org.springframework.context.ApplicationContextException: Failed to start bean ‘org.springframework.a

Solution 1

You can’t name asyncData in you methods object. asyncData is for pre rendering solely.

Rename your operate to one thing else and it needs to be positive:

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

Also if you end up utilizing asyncData as in your high instance, you need to not initialise “ip” in your knowledge operate. What is returned from asyncData is merged into knowledge anyway.

Original Author Andrew1325 Of This Content

Solution 2

AsyncData technique will likely be known as everytime earlier than loading the web page additionally be aware that asyncdata is barely obtainable in web page element in nuxt. You don’t have entry to the element occasion by means of this inside asyncData as a result of it’s known as earlier than initiating the element. You can use the returned knowledge from asyncData knowledge in your template with out initialising in your knowledge.

Nuxt asyncData

Original Author Navaneeth Vijay Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *