Question

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

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

after logged in Navbar. Log Out Button exists

这是我的导航栏组件代码。

implementation 'com.google.firebase:[firebase-product:version-number]

我一直在尝试的是单击“注销”按钮时，将本地存储中名为“ isLoggedIn”的键的值从“ true”更改为“ false”。之后，我将重新加载页面，并在页面装入后，使用本地存储的新值（现在为“ false”）更改名为“ isLoggedIn”的组件数据。因此，我期望按钮不会在那里。

问题是，每当我单击注销时，“注销按钮”将一直存在，好像我没有更改希望在v-if中不会被评估为“ true”的值一样。我不知道是什么问题还是什么问题，因为我是Vue的新手，我真的希望你们能告诉我这是什么。非常感谢！

Answer 1

尝试使用：
localStorage.setItem("isLoggedIn", false)

和：
localStorage.getItem("isLoggedIn")

看看有什么区别！

Answer 2

在您的logOut()方法中，您只更改了localStorage中的值，但是v-if="isLoggedin"被绑定到组件的数据，因此您也需要对其进行更新。

logOut: function () {
  localStorage.isLoggedIn = false;
  localStorage.access = null;
  localStorage.refresh = null;
  this.isLoggedIn = false
  location.reload();
},

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

this.isLoggedIn = (localStorage.isLoggedIn === 'true')

这是一个小型jsfiddle，供您使用：https://jsfiddle.net/6rv7j5bg/

具有v-if的元素未按预期更新

2 个答案: