I am currently working with nuxt v2.14.1 along with typescript and the nuxt-property-decorator package. I've been encountering a variety of issues.
One of the problems I'm facing is the inability to set data from fetch() or asyncData.
console.log(this.fruits) // => undefined console.log(response.data);// => [{},..} this.fruits = response.data; // => this does not set fruits
Even Vue dev tools display fruits as an empty array.
Could someone shed light on what might be happening and provide guidance on how to resolve this issue?
Below is a snippet of code using fetch:
@Component({
layout: 'AppLayout',
async fetch({ query, store }: Context) {
const self = this;
const model = new Car();
model.setFilters(query);
const response = await model.$api.$get('/new/cars').catch(() => {
store.$showError('Unable to fetch cars');
});
if (response) {
// @ts-ignore
self.cars = Car.collect(response.data as Partial<Car>[]);
}
},
})
export default class index extends Vue {
cars: Car[] = [];
}
The provided code works when I rename fetch to mounted.
Furthermore, using asyncData seems to work initially as I can see my list of cars, but upon completion of page loading, the page automatically clears even though the cars are visible in Vue dev tools.
Update: I've noticed that not using nuxt context in fetch parameter seems to work. The reason behind this behavior is unknown to me.