Vue if statement not processed quickly enough

Question

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?

Try v-show instead of v-if, this way layout engine in browser wouldn't have to think too much (events unpinning, destroying hooks, garbage collecting and so on). This is the real way to hide element, v-if removes it completely from the dom, not just hides. — Maciej Kwas
– Maciej Kwas, Commented Mar 28, 2019 at 23:07
You need to be calculating the boolean beforeMount - having a good understanding of the lifecycle vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks will help immensely in issues like this — Trent
– Trent, Commented Mar 28, 2019 at 23:07

Trent · Accepted Answer · 2019-03-29 00:04:34Z

2

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>

edited Mar 29, 2019 at 0:04

answered Mar 28, 2019 at 23:52

Trent

3,1332 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devildude4427 Over a year ago

Works perfectly, thank you! I would've been stuck here for a while, as I had no idea the lifecycle hooks even existed. You helped a lot.

Collectives™ on Stack Overflow

Vue if statement not processed quickly enough

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related