Nuxt async fetch() doesn't update component property

user_11295843 0
Viewed 506

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 }
},
vuejs2 nuxt.js vue.js
1 Answers

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.

user_88165850
Related