For my project, I am using Laravel with Vue. On the main page, I have listed all articles and when a user clicks on a specific article, a new page opens displaying that article with other prominent articles shown on the side like this: .https://i.stack.imgur.com/sNg4b.jpg
Here is the code for the main page:
<template>
<div class="container-fluid">
<div class="row">
<div class=" col-lg-3 d-none d-lg-block top-article">
<top-articles />
</div>
<div class="col-12 col-lg-2">
<new-articles />
</div>
<div class="col-lg-2 d-none d-lg-block OurStories2">
<div v-for="article in articles" :key="article.id" class="height">
<router-link :to="{ name: 'SinglePost', params: { id: article.id } }">
<div class="NewArticle">
<img :src="'/images/1617619359.jpg'" class="img-fluid newarticles-img">
<h6 class="NewArticleTitle">{{ article.title.ar }}</h6>
</div>
</router-link>
<div>
<p class="NewArticleBody">{{ article.excerpt.ar + ' Read more' }}</p>
</div>
</div>
</div>
<div class="col-lg-2 d-none d-lg-block">
<our-stories />
</div>
</div>
</div>
</template>
<script>
import NewArticles from './NewArticles.vue';
import OurStories from './OurStories.vue';
import TopArticles from './TopArticles';
export default {
components:{
TopArticles,
OurStories,
NewArticles
},
data() {
return {
articles: []
}
},
created() {
this.axios
.get('http://localhost:8000/api/articles/')
.then(response => {
this.articles = response.data;
});
},
methods: {
deleteProduct(id) {
this.axios
.delete(`http://localhost:8000/api/articles/${id}`)
.then(response => {
let i = this.articles.map(data => data.id).indexOf(id);
this.articles.splice(i, 1)
});
}
}
}
</script>
On the post page: https://i.stack.imgur.com/51wAl.jpg
Here is the code for the post page:
<template>
<div>
<go-back />
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<!-- <img :src="'/images/articles/'+ articles.image" class="img-fluid img"> -->
<img :src="'/images/articles/1617007463.jpg'" class="img-fluid img">
<p>{{articles.body.en}}</p>
</div>
<div class="col-lg-3 d-none d-lg-block">
<top-articles />
{{articlesId}}
</div>
<div class="col-lg-3 our-stories d-none d-lg-block">
<our-stories />
</div>
</div>
<div>
<router-view :key="$route.path"> </router-view>
</div>
</div>
{{articlesId}}
</div>
</template>
<script>
import GoBack from '../GoBack';
import OurStories from '../OurStories.vue';
import TopArticles from '../TopArticles.vue';
export default {
components:{
GoBack,
TopArticles,
OurStories
},
data(){
return{
articles: "",
articlesId:this.$route.params.id,
image:"https://via.placeholder.com/1520x400"
}
},
props: {
id: {
type:Number,
required: true
},
},
created() {
this.axios
.get('http://localhost:8000/api/articles/')
.then(response => {
this.articles = response.data.find( response => response.id === parseInt(this.id)); //id parameter type, your items has id as number type but router return string and we use strict comparison in Product component.so Use parseInt(this.$route.params.id)
console.log(this.articlesId);
});
}
}
</script>
- The issue at hand is that upon clicking an article on the main page, it opens on the post page along with top articles displayed on the side. However, when a user clicks on one of these side articles on the post page, the content does not change (only the URL's ID updates to the new article ID) but the content remains the same previous article. The desired outcome is for the content to update whenever a user clicks on an article from the side panel on the post page.