Nuxtjs data() variable cannot change - vue.js

Question

I hava a simple nuxt/vue app. It uses an API to call filters and data, but the fetch hook dont change the variable. Here's my code:
data() {
return {
filters: {},
fulldata: [],
filterName: '',
}
},
async fetch({app}) {
app.$axios.$get('/api/oklevelek').then(data => {
this.fulldata = data
this.filters = data.possibleFilters
console.log(this.fulldata) //data shows
})
console.log('adatok')
console.log(this.fulldata) //undefined
},
fetchOnServer: true,
methods: {
test() { //test method for data
console.log('test')
console.log(this.fulldata) //undefined
},
},
Thanks for your time and appreciate your help!

Answer 1

You need to await the response from your fetch call. At the moment, you’re trying to console.log this.fulldata immediately after calling the api, before the data has had chance to return.
async fetch({app}) {
app.$axios.$get('/api/oklevelek').then(data => {
this.fulldata = data
this.filters = data.possibleFilters
console.log(this.fulldata) //data shows
})
console.log('adatok')
// this runs immediately after the api call
console.log(this.fulldata) //undefined
}
This should help:
async fetch({app}) {
// add await here
let { data } = await app.$axios.$get('/api/oklevelek')
// now this code waits for the api call to finish
this.fulldata = data
this.filters = data.possibleFilters
console.log(this.fulldata)
console.log('adatok')
console.log(this.fulldata)
}