[Vuejs]-Navbar not updating on successful User Signin

by

3👍

✅

You’re using a function for your conditional display (v-if="!signedIn()") but the function returns nothing meaning nothing is reactively rendered within the template.

Try to add a new data property which can be updated on signin:

<template>
  ...
  <div class="text-sm sm:flex-grow">
    <router-link to="/home" v-if="!isSignedIn">Home</router-link>
    <router-link to="/about" v-if="!isSignedIn">About</router-link>
    <router-link to="/features" v-if="!isSignedIn">Features</router-link>
    <router-link to="/pricing" v-if="!isSignedIn">Pricing</router-link>
    <router-link to="/contact" v-if="!isSignedIn">Contact Us</router-link>
  </div>
  ...
</template>

<script>
export default {
  name: 'Signin',
  data () {
    return {
      email: '',
      password: '',
      error: '',
      isSignedIn: false // <= here
    }
  },
  //...
  methods: {
    signin () {
      this.$http.plain.post('/signin', { email: this.email, password: this.password })
        .then(response => {
          this.signinSuccessful(response)
          this.isSignedIn = true // <= and here
        }).catch(error => this.signinFailed(error))
    },
    //...
  }
}
</script>

Then in your logout’s function, you can set the isSignedIn back to false.

👤Sovalina

1👍

For your localStorage object to be reactive, it must be part of the components data or computed properties.
The simplest solution would be storing authentication state in vuex and then supplying it to your components using a vuex mapGetter. You then update the state with a vuex action when the user signs in.
If you are not familiar with vuex there is an example on their website that should be sufficient for this.

👤CALEB KPABITEY

Leave a comment