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

Question

最近我一直在尝试使用VueJS创建一个小项目，我遇到了这个问题。所以我有这个导航栏，其中包含一个 Log Out Button 元素，该元素仅在有人已经登录时才会显示。这是我登录之前的导航栏。

Before Login Navbar. No Log Out Button

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

after logged in Navbar. Log Out Button exists

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

<div id="logout-button" v-if="isLoggedIn">
      <button v-on:click="logOut">Log Out</button>
</div>

....


<script>
export default {
  name: "NavigationBar",
  data: function () {
    return {
      isLoggedIn: false,
    };
  },
  mounted() {
    if (localStorage.isLoggedIn !== undefined) {
      this.isLoggedIn = localStorage.isLoggedIn;
    }
  },
  methods: {
    ...
    logOut: function () {
      localStorage.isLoggedIn = false;
      localStorage.access = null;
      localStorage.refresh = null;
      location.reload();
    },
  },
};
</script>

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

问题是，每当我单击注销时，注销按钮总是在那里，就好像我没有更改希望不会在 v-if 中评估为“真”的值。由于我是 Vue 的新手，所以我不知道是哪个问题或什么问题，我真的希望你们能告诉我这是什么问题。非常感谢！

Answer 1

在您的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/

Answer 2

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

和：
localStorage.getItem("isLoggedIn")

看看有没有区别！