通过使用条件渲染完全停止显示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,
...
}
}