CODEWITHSUNDEEP
vue.js
Devildude4427
Devildude4427

Reputation: 1108

Vue if statement not processed quickly enough

I'm trying to build a site that centers around a dashboard and has a sidebar and a navbar.

The code here is what I use in my "App.vue" file:

<template>
    <v-app>
        <core-filter></core-filter>

        <core-toolbar v-if="$route.name !== 'Login'"></core-toolbar>

        <core-drawer v-if="$route.name !== 'Login'"></core-drawer>

        <core-view></core-view>
    </v-app>
</template>

This code works fine, but it isn't quick enough. When I go to the login page, I see the sidebar (drawer) and the navbar (toolbar) flash before disappearing. It's obvious something is disappearing, especially as the sidebar displaces the main content. You see something flash on the left and then the page content shifts over to be in (the new) center of the page.

Is there a better way to decide what elements should be shown? Is this even an acceptable way to do layouts?

Upvotes: 0

Views: 184

Answers (1)

Trent
Trent

Reputation: 3103

Here is an example of using beforeMount to achieve what you're looking for.

Because the check runs before mounting the DOM, the if won't have to evaluate the condition inline

https://codesandbox.io/s/vn0v7q11x3

The code in the script side should be something like this:

// Make sure you have a data property called showLoggedInComponents
beforeMount() {
    if (this.$route.name !== "Login") {
      this.showLoggedInComponents = true;
    }
  },

Then in your HTML template

<template>
    <v-app>
        <core-filter></core-filter>

        <core-toolbar v-if="showLoggedInComponents"></core-toolbar>

        <core-drawer v-if="showLoggedInComponents"></core-drawer>

        <core-view></core-view>
    </v-app>
</template>

Upvotes: 2

Related Questions