Vue.js 如何在用户登录到应用程序后打开vuetify对话框

在我的应用程序中，我想显示一个模式来介绍我的应用程序中的用户，因此它只会在用户第一次登录时出现。我所做的是在全局状态下存储

isNewUser

，并使用它来知道是否应该使用中描述的相同过程来呈现模态。（我没有使用事件总线）

这是我的父组件：

<template>
  <Intro :value="isNewUser" @input="finishTutorial" />
</template>

mounted() {
  const store = this.$store;
  this.isNewUser = store.state.auth.user.isNewUser;
},

我也尝试过使用v-if

<template>
    <Intro v-if="isNewUser" :value="true" @input="finishTutorial" />
</template>
<script>
export default {
  components: {
    Intro,
  },
  data() {
    return {
      isNewUser: false,
    };
  },
  mounted() {
    const store = this.$store;
    this.isNewUser = store.state.auth.user.isNewUser;
  },
  methods: {
    async finishTutorial() {
      this.$store.dispatch('auth/finishTutorial');
      this.isNewUser = false;
    },
  },
};
</script>

导出默认值{
组成部分：{
简介，
},
数据（）{
返回{
isNewUser:false，
};
},
安装的（）{
const store=this.$store；
this.isNewUser=store.state.auth.user.isNewUser；
},
方法：{
异步finishTutorial（）{
此.store.dispatch（'auth/finishTutorial'）；
this.isNewUser=false；
},
},
};

您可以使用计算属性执行此操作：

computed: {
  isNewUser() {
     return this.$store.state.auth.user.isNewUser;
  }
}

在模板中，您可以这样做：

<template>
  <Intro :value="isNewUser" @input="finishTutorial" />
</template>

在设置isNewUser的值后，使用v-if来渲染子组件如何？我已经尝试过了，但不起作用。您可以共享相同的代码吗？或者只在子组件的挂载钩子中执行console.log，以查看是否获得正确的值。我已使用v-ifwhere将isNewUser的值设置为true的代码编辑了我的问题。但我没有使用computed属性，因为我只想在组件呈现后显示对话框。如果我像你说的那样使用computed属性，那么在组件在屏幕上完全呈现之前，对话框会快速打开和关闭。你应该遵循@Himanshu提示，因为我不完全理解你的意思

<template>
  <Intro :value="isNewUser" @input="finishTutorial" />
</template>