0

In my application I want to show a modal to introduce the user in my application, so it will appear only in the first time he logs in. What I am doing is storing isNewUser in the global state and using it to know if it should render the modal or not using the same process described in this answer. (I'm not using event bus)

Here is my parent component:

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

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

When the user logs in and this component is rendered I saw the dialog being rendered and closing. If I hit f5 it reloads the page and dialog is showed correctly.

If I do the bellow modification it works, but I don't want to solve the problem this way since it won't work for all cases, it will depend on the speed of the user computer/internet.

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

I've tried using v-if as well

<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>
B. Almeida
  • 377
  • 1
  • 11

1 Answers1

0

You can use a computed property to do so:

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

and in the template you would do like so:

<template>
  <Intro :value="isNewUser" @input="finishTutorial" />
</template>
Bruno Francisco
  • 3,841
  • 4
  • 31
  • 61
  • But i'm not using the computed property because I want to show the dialog only after the component renders. If I use the computed property as you've said the dialog open and closes fast before the component is fully rendered in the screen. – B. Almeida Dec 17 '19 at 19:22
  • You should follow @Himanshu tip then because I'm not fully understanding what do you mean – Bruno Francisco Dec 17 '19 at 19:25