laravel + vue <router-link> doesn't change the content

Question

I have a project using laravel + vue ,i listed all articles in the main page ,When the user clicks on a specific article, a page opens and displays the article with the most prominent articles appearing on the side like this: .

the main page code is:

    <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="hieght">
                <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>

in post page:

the post page code is:

    <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 problem is: When the user clicks on an article on the main page, it opens and displays on the page and the top articles appear with you on the side. Everything is good so far, but when the user clicks on one of the articles on the side of the post, nothing happens (only the id in the url changes to the article's id New) but the content remains the previous article , I want the content to change whenever the user clicks on an article from the articles on the side of the post

Answer 1

You need to move the axios request to a method and call it inside created hook. Then use watch to reactive route changes and call the axios request again inside watch.

<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.getArticles();

    },
    methods: {
        getArticles() {
            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);
                });
        },
    },
    watch: {
        $route(to, from) {
            // react to route changes...
            this.articlesId = this.$route.params.id
            this.getArticles();
        }
    },
}
</script>