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"  @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
        }
    });
},

CodePudding user response：

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,
        ...
    }
}