0

Right now, I have an application where a modal pops up when a user logs in. Just a generic welcome message, but I am not sure if I am satisfied with the method I am using. Right now I am calling the modal using a beforeRouteEnter, which triggers a boolean that opens the modal. It works, but I notice that this triggers the modal before axios has been able to fetch my user data, which means that the modal first shows up with no data and then 2-3 seconds after the data gets loaded into it.

Is there any other way I can trigger this modal when a user logs in without using beforeRouteEnter? Or is there a way to somehow get the data from Axios faster?

My parent:

<template>
   <b-container class="my-4">
      <welcome-modal :show-modal="visible" />
   </b-container>
</template>

<script>
  import WelcomeModal from '@/views/company/WelcomeModal';


  export default {
    components: {
      WelcomeModal
    },

data() {
  return {
    visible: false,
  };
},
beforeRouteEnter(to, from, next) {
  next((vm) => {
    if (from.path === "/login") {
      vm.visible = true;
    }
  });
},
}
 };
</script>

The child/modal:

<template>
  <b-modal
    :modal-class="modalStyling"
    centered
    modal-class="justify-content-center"
    v-model="isVisible">
      <b-row v-for="user in user">
        <b-col class="text-center">
          <h2>{{ 'welcome' + ' ' }} {{ user.name }}</h2>
        </b-col>
      </b-row>

  </b-modal>
</template>

<script>
  import {axiosService} from '@/services/axios';

export default {
 props: {
  showModal: Boolean
},
data() {
  return {
    isVisible: false,
    logs: {},
    currentUser: [],
    user: {},
  };
},
methods: {
  getUser(){
    axiosService.getCurrentUser()
      .then(result => {
        this.user = result.data;
        return axiosService.getUserLogs(this.user.id)
          .then(result => this.logs = result.data);
      })
  }
},
created(){
  this.getUser()
  this.isVisible = this.showModal
   },
 };
</script>
Scandidi
  • 23
  • 3
  • 1
    Fetch the data using Axios on the `created` hook and open your modal on the `mounted` hook. Read this answer for more info- https://stackoverflow.com/q/49577394/11834856 – Neha Soni Feb 23 '23 at 16:23
  • triggering the modal by router is weird. what really triggers the modal? When entering a path, put the modal in that page. If after successful login, move it to axios and use a method like `.$message(...)` instead of change variable to open a modal, see [element ui example](https://element.eleme.cn/#/en-US/component/message) – YeXiaoRain Feb 23 '23 at 16:37
  • If you want to use beforeRouteEnter then move the whole procedure to it, including the request. You may want to keep data in a global store if it's supposed to be available elsewhere. Notice that the first router navigation may happen before the app is mounted and there may be no modal to show at that point. – Estus Flask Feb 23 '23 at 16:38

0 Answers0