CODEWITHSUNDEEP
vue.jsvuejs2nuxt.js
Kos-Mos
Kos-Mos

Reputation: 707

Nuxt async fetch() doesn't update component property

I have a component that works perfectly with asyncData(), but i want to use fetch() instead. The problem is that when using fetch method, 'car' property is never updated. Am i missing something?

Doesn't work:

data() {
  return {
    car: null,
  }
},
async fetch({ $axios, route }) {
  this.car = await $axios.$get('/cars/' + route.params.id)
},

Works perfectly:

data() {
  return {
    car: null,
  }
},
async asyncData({ $axios, route }) {
  const response = await $axios.$get('/cars/' + route.params.id)
  return { car: response.data }
},

Upvotes: 2

Views: 1601

Answers (1)

kissu
kissu

Reputation: 46769

If you use the fetch hook with something like fetch({ ... }), you'll be using the old fetch() hook.

If you want it to work, try out rather

async fetch() {
  this.car = await this.$axios.$get(`/cars/${this.$route.params.id}`)
},

As confirmed in this github issue.

Upvotes: 6

Related Questions