使用条件渲染完全停止显示 div

Question

有一件事困扰着我。我有一行代码使用“v-if”标签，它用于在您使用设置工具后隐藏菜单项之一。

这里的问题是当你加载页面时，它会先显示半秒的菜单项，应该从一开始就直接隐藏。我怎样才能做到这一点？

代码如下：

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

beforeMount 生命周期钩子：

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

Answer 1

那是因为你在得到api的响应时修改了this.configCompleted，这需要一些时间。您可以在 data()

中将它的默认值设置为 true

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

使用条件渲染完全停止显示 div

Completely stop displaying a div by using conditionally rendering

vue.js

vuejs2