在 VUE 3 框架中的 created() 生命周期方法中切换 v-if 变量

Question

我有一个组件，其中有 3 个按钮。 2 最初是可见的

<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>.

然后我在 data() 中有一个数据变量

data() {
return {
  showLogout: false
}

在设置中，我引入了 HelloJS，在 created() 中，我添加了一个侦听器，用于切换变量

 setup() {
    return { hello }
  },



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

但它不会重新呈现按钮（隐藏 google 和 facebook 并显示注销）。

如何让它像这样工作？

Answer 1

只需使用设置挂钩来定义您的数据属性，例如：

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

    return { showLogout}
  },

在 VUE 3 框架中的 created() 生命周期方法中切换 v-if 变量

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

javascript

hello.js

vue.js

vue-component

vuejs3