I have a section called Related Content located at the bottom of my posts page, which displays other related posts.
When I click on the Related Content, I expect the router to update the page. However, it seems that although the URL changes, the view does not update accordingly.
Key Elements
Post.Vue
<template>
<div class="post-container" >
<router-view name="PostContent">
<h2>test</h2>
</router-view>
<div v-if="currentPost !== ''">
<img :src="currentPost.jetpack_featured_media_url" />
<!-- <h1 v-html="currentPost.title.rendered"></h1> -->
<div
v-html="currentPost.excerpt.rendered"
class="post-excerpt-container"
></div>
<div
v-html="currentPost.content.rendered"
class="post-content-container"
></div>
</div>
<section class="related-content">
<h2>Related Content:</h2>
<p v-if="currentPost.title !== undefined">If you enjoyed {{currentPost.title.rendered}}, we think you'll like:</p>
<div class="related-content-container" v-for="relatedPost in relatedPosts" :key="relatedPost.id" :data-id="relatedPost.id">
<router-link :to="{name:'Post',params:{id:relatedPost.id}}">
<RelatedCard :post='relatedPost' />
</router-link>
</div>
</section>
</div>
</template>
<script>
import { mapState } from "vuex";
import RelatedCard from '@/components/RelatedCard.vue';
export default {
name:"Post",
components:{RelatedCard},
data() {
return {
currentPost: "",
id: this.$route.params.id,
relatedPosts: []
};
},
computed: {
...mapState({
baseAPIURL: (state) => state.baseAPIURL,
posts: (state) => state.posts,
}),
},
created() {
console.log('created')
fetch(`${this.baseAPIURL}/posts/${this.id}?_embed`)
.then((resp) => resp.json())
.then((post) => {
this.currentPost = post;
});
},
methods: {
pushToRelated() {
this.posts.forEach((post) => {
post.relatedScore = 0;
if (post.id !== this.currentPost.id) {
post._embedded['wp:term'][0].forEach(el=>{
for(let i = 0;i < this.currentPost._embedded['wp:term'][0].length;i++){
if (el.name === this.currentPost._embedded['wp:term'][0][i].name){
post.relatedScore = post.relatedScore + 3
}
}
})
post._embedded['wp:term'][1].forEach(el=>{
for(let i = 0;i < this.currentPost._embedded['wp:term'][1].length;i++){
if (el.name === this.currentPost._embedded['wp:term'][1][i].name){
post.relatedScore = post.relatedScore + 1
}
}
})
}
});
this.relatedPosts = this.posts.sort((a,b)=>a.relatedScore - b.relatedScore).reverse().slice(0,5)
}
},
watch: {
currentPost: function () {
if (this.posts.length > 0){
this.pushToRelated();
}
},
}
};
</script>
RelatedCard.vue
<template>
<div class="related-card">
<div>
<img v-if="post._embedded['wp:featuredmedia'][0].media_details.sizes.medium_large !== undefined" :src="postImageML" alt="" />
<img v-else :src="postImage" alt="">
</div>
<div>
<h2 v-html="post.title.rendered"></h2>
<p v-html="post.excerpt.rendered"></p>
</div>
</div>
</template>
<script>
export default {
props: {
post: Object,
},
computed:{
postImageML(){
return this.post._embedded['wp:featuredmedia'][0].media_details.sizes.medium_large.source_url
},
postImage(){
return this.post._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url
}
},
};
</script>
My Router Configuration
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/list",
name: "List",
component: List,
},
{ path: "/database", name: "Database", component: Database },
{path:"/post/:id",name:"Post",component:Post}
];
const router = new VueRouter({
routes,
});
export default router;
What I Have Tried:
I attempted to use $router.go(), which did update the page but caused issues with my watchers and prevented users from returning to the previous post. Additionally, I experimented with component keys on the wrapper element without success.
If you have any insights into why this issue is occurring or suggestions for a solution, please feel free to share them.