I have aproducts/indexpage withproducts/[slug]in the main product page and I have aNuxtLinkto change the page and go toproducts/[slug]and get the data for that product.
On the first click, I have the correct data, but when I click back or click on the product/index page and then try to click on another product, I have the first product I clicked on and the information for each product, Again I got the information for the first product I clicked on.
Usingconsole.logallowed me to find that my fetched datahas not changed, am I missing something here?
Using:key
ondoes not work.
The first product I clicked
The second product is still unchanged, the data comes from the first product
The third picture is still unchanged
productComponent.vue
![]()
{{ title }}
قیمت : {{ price }} تومان
products/index.vuePage
محصولات
product/[slug]
![]()
![]()
![]()
نام محصول :
{{ product.name }}
کشور :
{{ product.country }}
جنس :
{{ product.material }}
سن :
{{ product.age }}
رنگ :
{{ product.color }}
وزن :
{{ product.weight }}
طول :
{{ product.length }}
عرض :
{{ product.width }}
ارتفاع :
{{ product.height }}
قیمت :
{{ product.price }}
- توضیحات
برچسب ها : {{ tags }} /
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I found the solution I have to add a parameter
in useFetchconst {data: productData, pending, refresh, error} = await useFetch(`http://127.0.0.1:8000/api/products/${slug}` , { initialCache: false })Because the api caches and will not send another request, use
initialCache : falseit will send another request This way works fine for main product, but in products/[slug] or blog/[slug] I think you have to do this, if you have a better way please leave me a comment