Laravel router-link works only the first time

Question

I am trying to fetch results from database in News.vue, and display them in Topnews.vue. I have two links fetched. When I click link1, it shows up the Topnews.vue template with everything working as intended, however, if i click link2, nothing happens, except for that the URL changes, but the template does not show up the result. If i refresh the page and click link2 or click on the navbar, then link2, it shows up, and same, clicking then link1, changes the URL, but doesnt show up. I'm really stuck on that and I'd be really glad if you help me out on that issue. Hope you understand.

News.vue

<template id="news">
        <div class="col-sm-5">
        <div class="cars" v-for="row in filteredNews" >
        <div class="name" >
            <p class="desc_top_time">{{row.created_at}}</p>
                <span class="last_p"> {{row.category}}</span>
            <h3 style="margin-bottom:-4px; font-size: 16px;">
    <router-link class="btn btn-primary" v-bind:to="{name: 'Topnews', params: {id: row.id}  }">{{row.title}}</router-link></h3>
        </div></div></div>
</template>


<script>
export default {
    data: function() {
        return {
            news: [],
        }
    },
    created: function() {
        let uri = '/news';
        Axios.get(uri).then((response) => {
            this.news = response.data;
        });
    },
    computed: {
        filteredNews: function() {
            if (this.news.length) {
                return this.news;
            }
        }
    }
}
</script>

Topnews.vue

<template id="topnews1">
<div class="col-sm-7">
<div class="cars">
<img :src="topnews.thumb" class="img-responsive" width=100%/>
<div class="name" ><h3>{{ topnews.title }}</h3>
<p> 
<br>{{ topnews.info }}<br/>
</p>
</div></div></div>
</template>

<script>
export default {
        data:function(){
               return {topnews: {title: '', thumb: '', info: ''}}
        },
        created:function()  {
            let uri = '/news/'+this.$route.params.id;
            Axios.get(uri).then((response) => {
                this.topnews = response.data;
            });
        }
    }
</script>

Answer 1

If you click a link referring to the page you are on, nothing will change. Vue Router is smart enough to not make any changes.

My guess is that the IDs are messed up. If you are using Vue devtools you will be able to easily see what data is in each link. Are they as you expect.

Answer 2

Like GoogleMac said Vue will reuse the same component whenever possible. Since the route for both IDs use the same component Vue will not recreate it, so the created() method is only being called on the first page. You'll need to use the routers beforeRouteUpdate to capture the route change and update the data.

in TopNews.vue:

export default {
        data:function(){
               return {topnews: {title: '', thumb: '', info: ''}}
        },
        beforeRouteEnter:function(to, from, next)  {
            let uri = '/news/'+ to.params.id;

            Axios.get(uri).then((response) => {
                next(vm => {
                    vm.setData(response.data)
                })
            });
        },
        beforeRouteUpdate: function(to, from, next) {
            let uri = '/news/'+ to.params.id;
            Axios.get(uri).then((response) => {
                this.setData(response.data);
                next();
            });

        },
        methods: {
            setData(data) {
                this.topnews = data
            }
        }
    }