I am working on a Vue component where I retrieve data from localStorage. Here is how I handle it:
if (localStorage.getItem("user") !== null) {
const obj_user = localStorage.getItem('user');
var user = JSON.parse(obj_user);
} else {
user = null;
}
return {
user
}
Once the data is retrieved, I need to check and display it within the component. This is how I currently implement it:
<li v-if="!user"><a href="/login">Login</a></li>
<li v-if="user">
<a href="#"><span>{{user.name}}</span></a>
</li>
However, I have noticed that the data does not update immediately, but only after a page reload. For example, even after logging in and getting redirected to another page, the "Login" link still appears. What could be the issue here? Is there a different approach to checking and displaying data from localStorage within a component? Thank you for your help.