Currently, I am utilizing a vuex getters called isLoggedIn to verify whether a user is logged in or not.
<div v-if="isLoggedIn" class="ml-2 py-2 group relative">...</div>
data() {
return {
isLoggedIn: this.$store.getters['auth/isLoggedIn']
}
},
However, I have encountered an issue where the above implementation does not work as expected. Surprisingly, it works when I directly check the condition within the v-if without storing the value of getters in data. Here is what worked for me:
// This works for me.
<div v-if="this.$store.getters['auth/isLoggedIn']" class="ml-2 py-2 group relative">...</div>
I am puzzled by this difference in behavior. Can anyone shed some light on why this may be happening? Thank you.