Nuxtjs component not hotreloading on v-if condition change

113 Views Asked by At

I have a navbar component that contains 2 buttons "Logout" and "Dashboard" that are rendered only if the user is authenticated. (using v-if).

However when the user click on the Logout button, the navbar is not reloaded and so the buttons stay visible until you reload the page. How do I set my v-if condition so that when the value of the v-if change, also the components (divs) update?

My Navbar

<!-- ... -->

<template slot="end">
      <b-navbar-item tag="div">
        <div class="buttons">
          <a v-if="userToken" class="button is-primary" style='padding:4px; margin-right:0;'>
            <b-button size="is-normal"
                type="is-primary"
                icon-right="close"
                outlined
                inverted
                style="margin-bottom: 0;"
                @click="logout">
                Logout
            </b-button>
          </a>
          <a v-if="userToken" class="button is-primary" style='padding:4px; margin-left:0;'>
            <b-button size="is-normal"
                type="is-success"
                icon-right="account-circle-outline"
                style="margin-bottom: 0;"
                @click="goToDashboard">
                Dashboard
            </b-button>
          </a>
          <a v-else class="button is-primary">
            <b-icon icon="account-circle-outline" size="is-medium"> </b-icon>
          </a>
        </div>
      </b-navbar-item>
    </template>
  </b-navbar>
</template>

<script>
export default {
  data () {
    return {
      userToken : '',
    },
  methods: {
    getUserToken() {
      let token = this.$cookies.get('userToken')
      if (token) {
        this.userToken = token
        this.$router.push('user_dashboard')
      }
    },
    logout() {
      this.$cookies.remove('userToken')
      this.userToken = ''
    }
  },
  mounted() {
    this.getUserToken()
  },
// ...
</script>
1

There are 1 best solutions below

0
On BEST ANSWER

Ok I'm really sorry, I eventually solved the issue by making those changes:

methods: {
    getUserToken() {
      let token = this.$cookies.get('userToken')
      if (token) {
        this.userToken = token
        this.$router.push('user_dashboard')
      } else {
        this.userToken = ''
      }
    },
    logout() {
      this.$cookies.remove('userToken')
      this.getUserToken()
    }
  },
  mounted() {
    this.getUserToken()
  },