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>

in data:() i return this:

ingelogd: false

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;
    }
  },

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

回答1:

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

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

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.

回答2:

https://stackoverflow.com/a/40586872/8647537

Checkout the answer above. The lazy way or not very good approach will be

vm.$forceUpdate();

it is not good approach though. Read more in mentioned link.

来源：https://stackoverflow.com/questions/65007697/is-there-something-to-auto-update-this-code-in-vue