是否可以在vue中自动更新此代码? [英] Is there something to auto update this code in vue?

问题描述

我在导航器中看到了此按钮，该按钮在用户登录时和用户注销时显示.但是，现在我需要刷新我的页面，然后按钮才能删除/出现.这是我的代码:按钮:

I got this button in the navigator that shows up when a user is logged in and when the user logs out the button is gone. But now i need to refresh my page before the button removes/appears. Here is my code: Button:

<div v-if="ingelogd">
  <div class="w-2/12 hidden lg:flex" v-for="(data, index) in allIngelogds" :key="index">
    <button @click="uitloggen" class="downloadbtn">
      {{ data.uitloggenKnop }}
    </button>
  </div>
</div>

在 data:()中，我返回此代码:

ingelogd: false

然后创建一个 mount()函数以更新用户是否登录:

and then i created a mounted() function to update if the user is logged in or not:

mounted() {
    const user = firebase.auth().currentUser
    if(user) {
      this.ingelogd = true;
    }
  },

是的，我导入了firebase和firebase/auth，而 allIngelogds 是一个graphql查询.

And yes i imported firebase and firebase/auth and allIngelogds is a graphql query.

推荐答案

您将要使用 onAuthStateChanged 侦听器，而不是 currentUser :

You'll want to use an onAuthStateChanged listener instead of the currentUser:

mounted() {
  firebase.auth().onAuthStateChanged((user) => {
    if(user) {
      this.ingelogd = true;
    }
  });
},

每次登录状态更改时，都会调用 onAuthStateChanged 侦听器，以确保您的 ingelogd 始终反映此状态.

The onAuthStateChanged listener gets called each time the sign-in state changes, which ensures your ingelogd always reflects this state.

有关更多信息，请参见

For more on this, see the first snippet in the Firebase documentation on getting the currently signed in user.

这篇关于是否可以在vue中自动更新此代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！