[Vuejs]-Laravel router-link works only the first time

0👍

✅

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
            }
        }
    }

0👍

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.

Leave a comment