I have been trying to find a way of refreshing a header component when pressing the logout button, so that the login and register will show up, without actually refreshing the whole page . If any one knows any effective way of doing that It would be much appreciated. I have a loggedIn state that changes based on the local storage token presence.

<template>
    <header id="header" >
        <div
            
        >
            <h1 >
                <router-link to="/home"> CatchA<span>Ride</span> </router-link>
            </h1>
            <nav id="navbar" >
                <ul>
                    <li>
                        <router-link  to="/home"
                            >Home
                        </router-link>
                    </li>
                    <li>
                        <router-link  to="/prices"
                            >Prices
                        </router-link>
                    </li>
                    <li>
                        <router-link  to="/team"
                            >Team
                        </router-link>
                    </li>
                    <li v-if="!hasToken">
                        <router-link  to="/login"
                            >Login
                        </router-link>
                    </li>
                    <li v-if="!hasToken">
                        <router-link  to="/register"
                            >Register
                        </router-link>
                    </li>
                    <li v-if="hasToken">
                        <router-link to="/" @click="logOut" >
                            Logout
                        </router-link>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
</template>

<script>
export default {
    data() {
        return {
            loggedIn: false,
        };
    },
    computed: {
        hasToken() {
            const storeToken = localStorage.getItem("token");
            if (storeToken) {
                return true;
            }
            false;
        },
    },
    methods: {
        logOut() {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            localStorage.removeItem("id");
            this.$forceUpdate();
        },
    },
};
</script>

CodePudding user response：

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