The issue I am facing is that the meta data on my website does not update when the route changes. Even though the route has a watch function that updates the view correctly, the metaInfo() method from vue-meta fails to keep up with the changes. Below is an excerpt from the <script> section of my code:
<script>
export default {
name: "Product",
watch: {
'$route.params.ProductID': {
deep: true,
immediate: true,
handler() {
this.getProduct(); // calls getProduct() on route change. Is there a way to also invoke metaInfo() from here?
}
}
},
metaInfo() {
return {
title: this.Product.ProductTitle,
meta: [
{
name: 'description', content: this.Product.ProductTitle
}
]
}
},
computed: {
Product() {
return this.$store.getters.getProduct
}
}, mounted() {
if (this.Product == null || !this.Product.length) {
this.getProduct();
}
}, methods: {
getProduct() {
return this.$store.dispatch('loadProduct', {ProductID: this.$route.params.ProductID})
}
}
}
</script>
The problem arises when transitioning from /product/123 to /product/124, where the metaInfo() still displays the metadata for /product/123. Only upon refreshing the page, does the metaInfo() reflect the correct data for /product/124.
I require the watch function to trigger an update of metaInfo(), but I'm uncertain about how to achieve this. The documentation does not provide any clear guidance on this matter. Any assistance would be greatly appreciated.