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