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.
Add a comment
|
2 Answers
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
1 Comment
Daniel
good idea is to also provide alternative content
<div v-if="loaded"></div><div v-else class="myLoaderCss">Loading</div>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.
