Question

我用谷歌搜索了这个，但我找不到任何具体的解决方案。基本上我有一个依赖于init调用的vue组件，我希望它在调用完成之前停止渲染，此时我希望组件呈现。看似简单，但除非我遗漏了一些东西，否则找不到任何生命周期方法。

Answer 1

您可以将v-if用于此目的

<template>
    <div v-if="loaded"></div>
</template>

<script>
    export default {
        name: 'TestComponent',
        data: function () {
            return {
                loaded: false
            }
        },
        created() {
          callExternalServices().then(() => {
             this.loaded = true
          })
        }
    }
</script>

它将呈现一个空组件，直到loaded == true

Answer 2

基本上，您在created或mounted生命周期方法中进行初始化调用，并使用调用的响应初始化data对象。如果在调用期间没有更改数据，则没有理由让vue呈现任何内容。

也许你可以提供一个能够准确显示你问题的jsfiddle。

在调用完成之前，如何停止渲染vue组件

2 个答案: