Toggle v-if variable inside created() lifecycle method in VUE 3 framework [duplicate]-CodePudding

I have a component, where there are 3 buttons. 2 are visible initially

<template>
  <button v-show="!showLogout" @click="login('google', 'profile, email')">
    Google
  </button>

  <button v-show="!showLogout" @click="login('facebook', 'email')">
    Facebook
  </button>

  <button v-show="showLogout" @click="logout()">
    Log out
  </button>

</template>.

Then I have an data variable inside data()

data() {
return {
  showLogout: false
}

In setup I bring in the HelloJS and in created() I add a listener where I toggle the variable

 setup() {
    return { hello }
  },



 created() {
    hello.on('auth.login', function(auth) {
      this.showLogout = true
    })
  }

But it's not rerendering the buttons (hiding google and facebook and showing logout).

How to get it to work like this?

CodePudding user response：

Just use the setup hook to define your data properties like :

import {ref} from "vue"
...
 setup() {
     const showLogout= ref(false)
   
     hello.on('auth.login', function(auth) {
       showLogout.value = true
    })

    return { showLogout}
  },