Vue.js 具有v-if isn'；t按预期更新

最近我一直在尝试使用VueJS创建一个小项目，我遇到了这个问题。所以我有一个导航栏，它包含一个注销按钮元素，只有当有人已经登录时才会显示。这是我登录前的导航栏

登录后，我的导航栏会是这样的

这是我的导航栏组件代码

注销
....
导出默认值{
名称：“导航栏”，
数据：函数（）{
返回{
伊斯洛格丁：错，
};
},
安装的（）{
if（localStorage.isLoggedIn！==未定义）{
this.isLoggedIn=localStorage.isLoggedIn；
}
},
方法：{
...
注销：函数（）{
localStorage.isLoggedIn=false；
localStorage.access=null；
localStorage.refresh=null；
location.reload（）；
},
},
};

尝试使用：

localStorage.setItem（“isLoggedIn”，false）

和：

localStorage.getItem（“isLoggedIn”）

看看有没有什么不同

在

logOut（）

方法中，您只需更改

localStorage

中的值，但是

v-if=“isLoggedin”

绑定到组件的数据，因此您还需要更新该值

注销：函数（）{
localStorage.isLoggedIn=false；
localStorage.access=null；
localStorage.refresh=null；
this.isLoggedIn=false
location.reload（）；
},

此外，您只能在localStorage中存储字符串，因此需要计算字符串以返回组件数据的布尔值

this.isLoggedIn=（localStorage.isLoggedIn==='true'）

---

这里有一个小JSFIDLE供您使用：

Hi！谢谢你的建议。我试过你的建议，但不幸的是，这对我的案子不起作用（我访问本地存储的方式基于vue的官方文档。谢谢！您尝试过完全删除本地存储属性吗？您好，谢谢您的建议。我尝试过，但在这种情况下，这种方法也不起作用。另外，我希望组件的数据为“isLoggedIn”当我的组件的生命周期达到“挂载”时，将根据我的本地存储数据进行更改。但是，这也不起作用。感谢您的帮助！更新了答案并添加了一个JSFIDLE作为示例嘿，谢谢您的更新，我相信您的建议效果很好。：）我只知道本地存储只能存储字符串，不能存储任何其他类型的字符串。谢谢你投下它

this.isLoggedIn=！！！localStorage.isLoggedIn