Question

每当我未登录时，我都试图隐藏我的网站标题，并在登录时显示我的标题。我有一个名为App.vue的包装vue，其中包含与loggedIn绑定的标头。

  <div id="app">
    <Header v-if="loggedIn"></Header>
    <component :is="currentComponent" @triggerNotification="triggerNotification"/>
 </div>

loggedIn是我的数据的一部分

  data() {
    return {
      loggedIn: localStorage.getItem('loggedIn'),
    }
  },

现在，每次我从一个页面移到另一个页面时，我都想确保根据loggedIn属性显示标题还是不显示标题。

  watch: {
    currentComponent: 'setLoggedIn',
  },
  methods: {
    setLoggedIn() {
      this.loggedIn = localStorage.getItem('loggedIn');
    }
  }

每次我在页面之间移动时都会触发setLoggedIn函数，并且每次都正确设置loggedIn，但是由于某种原因，我的标题根本不会消失。

Answer 1

我发现了一个问题，localStorage将loggedIn保存为字符串，因此true始终将其识别为v-if，只需转换为布尔值localStorage.getItem('loggedIn')就可以了：）

localStorage.getItem('loggedIn') ---> localStorage.getItem('loggedIn) === 'true'

Vue v-if似乎在包装Vue中不起作用

1 个答案: