用户登录应用程序后如何打开 vuetify 对话框

Posted 2023-02-23

【中文标题】用户登录应用程序后如何打开 vuetify 对话框

【英文标题】：How to open vuetify dialog after user logs in to application

【发布时间】：2020-04-10 08:01:53

【问题描述】：

在我的应用程序中，我想显示一个模式来在我的应用程序中介绍用户，因此它只会在他第一次登录时出现。我正在做的是将isNewUser 存储在全局状态中并使用它来知道它是否应该使用this answer 中描述的相同过程来呈现模态。 （我没有使用事件总线）

这是我的父组件：

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

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

当用户登录并呈现此组件时，我看到对话框正在呈现并关闭。如果我按 f5，它会重新加载页面并正确显示对话框。

如果我进行以下修改，它可以工作，但我不想以这种方式解决问题，因为它不适用于所有情况，这将取决于用户计算机/互联网的速度。

mounted() 
  setTimeout(() => 
    const store = this.$store;
    this.isNewUser = store.state.auth.user.isNewUser;
  , 2000);
,

我也尝试过使用 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的值后，使用v-if渲染子组件怎么样？

我已经试过了，不行。

你能分享相同的代码吗？或者只是在子组件的挂载钩子中执行一个 console.log ，以查看您是否获得了正确的值。

我已经使用 v-if 用代码编辑了我的问题

你在哪里将 isNewUser 的值设置为 true？

【参考方案1】：

您可以使用计算属性来做到这一点：

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

在模板中你会这样做：

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

【讨论】：

但我没有使用计算属性，因为我只想在组件渲染后显示对话框。如果我按照您所说的那样使用计算属性，则对话框会在组件完全呈现在屏幕上之前快速打开和关闭。

你应该遵循@Himanshu 提示，因为我不完全理解你的意思