Toggle v-if variable inside created() lifecycle method in VUE 3 framework

Question

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?

`this` is not what you expect. Btw `login('facebook', 'email')` is used twice, could be a typo in the question. — Estus Flask, Sep 23 '21 at 08:03

score 1 · Accepted Answer · answered Sep 23 '21 at 08:03

1

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

answered Sep 23 '21 at 08:03

Boussadjra Brahim

82,684
19
144
164

And then to access this showLogout variable in – Mart123 Sep 23 '21 at 08:09
1

Yes it's exposed to the template and you could use it without `.value` in template, don't add it to `data(){...}` – Boussadjra Brahim Sep 23 '21 at 08:11

Toggle v-if variable inside created() lifecycle method in VUE 3 framework

1 Answers1