[Vuejs]-Trying to refresh a component in Vue 3 and laravel 9 without refreshing the page

by

0👍

✅

The problem is that computed properties will only update automatically if their dependant values are reactive. Basically Vue has no way of knowing when the values in localStorage have updated. There are libraries that will make this possible. However, without the use of such:

  • In your template change

    v-if="!hasToken" to v-if="!loggedIn"

  • modify your script

    export default {
    data() {
        return {
            loggedIn: !!localStorage.getItem("token");
        };
    },
    methods: {
        logOut() {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            localStorage.removeItem("id");
            this.loggedIn = false;
        },
    },
};

Leave a comment