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

Question

I've googled this but I can't find any specific solution. Basically I have a vue component that depends on an init call and I want it to stop rendering until the call completes, at which point I want the component to render. Seems simple but unless I'm missing something I can't find any lifecycle method that does that.

Answer 1

You can use v-if for that purpose

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

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

It will render an empty component until loaded == true

Answer 2

Basically you make an init call in the created or mounted lifecycle method and you initialize a data object with the response of the call. If you don't change data during the call there is no reason for vue to render anything.

Maybe you can provide a jsfiddle that show exactly your problem.