CODEWITHSUNDEEP
vue.jsvuejs2vue-component
whatoncewaslost
whatoncewaslost

Reputation: 2256

How do I stop my vue component from rendering until a call completes

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.

Upvotes: 10

Views: 16957

Answers (2)

ittus
ittus

Reputation: 22393

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

Upvotes: 26

budgw
budgw

Reputation: 710

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.

Upvotes: 0

Related Questions