Tengo un componente, donde hay 3 botones. 2 son visibles inicialmente
<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>.Entonces tengo una variable de datos dentro de data()
data() { return { showLogout: false }En la configuración, introduzco HelloJS y en created () agrego un oyente donde alterno la variable
setup() { return { hello } }, created() { hello.on('auth.login', function(auth) { this.showLogout = true }) }Pero no vuelve a mostrar los botones (oculta google y facebook y muestra el cierre de sesión).
¿Cómo hacer que funcione así?
Simplemente use el gancho de configuración para definir sus propiedades de datos como:
import {ref} from "vue" ... setup() { const showLogout= ref(false) hello.on('auth.login', function(auth) { showLogout.value = true }) return { showLogout} },