I'm working on a component with 3 buttons, where initially only 2 are visible.
<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>.
Inside my data(), there's a variable called showLogout:
data() {
return {
showLogout: false
}
In the setup part, I import HelloJS and in the created() function, I add a listener to toggle the variable:
setup() {
return { hello }
},
created() {
hello.on('auth.login', function(auth) {
this.showLogout = true
})
}
However, the buttons are not rerendering as expected (hiding google and facebook while showing logout).
Any suggestions on how to make it work correctly?