CODEWITHSUNDEEP
vue.jsvuejs2
Sander Plomp
Sander Plomp

Reputation: 261

Completely stop displaying a div by using conditionally rendering

There is this one thing that is bothering me. I have this one line of code which uses the "v-if" tag, it is used to hide one of the menu items after you've used a setup tool.

The problem here is that when you load up the page, it will display the menu item for half a second first which should be hidden directly from the start. How can I achieve this?

Here is the code:

                <li><button v-show="!configCompleted" class="btn" @click="setComponent('setup')">Setup</button></li>

beforeMount lifecycle hook:

beforeMount() {
    this.setComponent(this.$route.params.page)
    this.user = JSON.parse(localStorage.getItem('vue-laravel-ecommerce. d fuser'))
    axios.defaults.headers.common['Content-Type'] = 'application/json'
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('vue-laravel-ecommerce.jwt')
    axios.get('/api/shop').then( response => {
        if ( response.data.length ) {
            this.configCompleted = true
        }
    });
},

Upvotes: 0

Views: 206

Answers (1)

Romalex
Romalex

Reputation: 1819

That's because you modify this.configCompleted when you get the response from api, which takes some time. You can probably just set the default value of it to true in data()

data() {
    return {
        configCompleted: true,
        ...
    }
}

Upvotes: 2

Related Questions