çqck
Problems with loading/rendering a list of items when switching pages
On the products page, I implemented product loading and a "Load More" button. This is done using a ref variable page and useLazyAsyncData with the parameter watch: [page]. Since the data returned by useLazyAsyncData contains only new items, and I need to append these to the list, I created another ref variable called products, where I concatenate the items from the data. I do this using a watch:
watch(data, (newData) => {
if (newData && newData.products) {
products.value = products.value.concat(newData.products);
}
}, { immediate: true });
The problem is that if we navigate to the /products page, then to another page, and then back to /products, the old list of items remains on the page.
I don’t understand where it’s coming from and whether I’m doing everything correctly. Could you please advise how to resolve this issue?
Here’s a link to the demonstration: https://stackblitz.com/edit/nuxt-starter-petfxh7x?file=pages%2Fproducts.vue
11 replies