[Vuejs]-Binding a string in App.vue,will not update after change

by

2👍

✅

username should be a computed property in order to be reactive and reflect state changes in your component :

computed:{
   username(){ return this.$store.state.user.username }
}

your conditional rendering should be like :

<template>
[...]
<a v-if="!username" @click="$router.push({ name: 'Login' })">Login</a>
<template v-else> 
 <div >{{ username }}</div>
  <a  @click="logout">Logout</a>

</template>
[...]
👤Boussadjra Brahim

2👍

u need a computed.

computed: {
  userIsLoggedIn: function() {
    return this.$store.state.user.logdIn
  }
}

ur store state needs to have a state for loged in or out

after that u can setup ur login/logout button with a v-if when login is true or v-else when login is false

👤Deniz

Leave a comment