[Vuejs]-VueJs Lost Prop Data After Restart Page

by

0👍

As mentioned in the comments section, you are not losing data. It is just that your data (in your case the prop) is not reactive, meaning by the time prop is updated, ChildComponent.vue mounted was already called.

If you want to be able to work with a data passed throughout a prop, you can either watch (docs) for that prop, or simply define a computed (docs) that will depend on that specific prop.

So, in your case, it should be something like this:

export default {
    props: ["currentRoute"],
    methods: {
        _checkRoutes() {
                console.log("Child Component:: ", this.currentRoute);
        }
    },
    watch:{
        currentRoute: () {
            this._checkRoutes()
        }
    }
}

computed example:

export default {
    props: ["currentRoute"],
    computed:{
        currentWindowRoute: () {
            // Do some checks, call a method or whatever
            // and return something (value, Boolean, whatever you need for the case)
            return this.currentRoute;
        }
    }
}

Keep in mind that computed approach usually requires a return value.

Leave a comment