Как остановить рендеринг моего компонента vue до завершения вызова

Question

Я гуглил это, но не могу найти какое-то конкретное решение.В основном у меня есть компонент 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

Обычно вы делаете вызов init в методе жизненного цикла created или mounted и инициализируете объект data ответом на вызов.Если вы не измените данные во время вызова, нет никаких причин для vue что-либо визуализировать.

Может быть, вы можете предоставить jsfiddle, который точно показывает вашу проблему.