Почему v-if Vue не отображает блок во времени?

Question

Маленькие тестовые компоненты:

<template>
  <div 
    id="report-chart"
    v-if="report"
  ></div>
  <div v-else>
    Loading...
  </div>
</template>

<script>
  import ReportChart from '@/components/report-chart'
  export default {
    data () {
      return {
        report: null
      }
    },
    watch: {
      report (value) {
        if (value) this.showReport()
      }
    },
    methods = {
      showReport () {
        // I expect the 'report-chart' elem exists but Im wrong.
        console.log(document.getElementById('report-chart')) // -> null
      },
      loadReport () {
        // returns Promise
      }
    },
    mounted () {
      this.loadReport().then(data => (this.report = data))
    }
  }
</script>

Когда я вызываю console.log (), я ожидаю, что элемент 'report-chart' отображается, но не ошибается.Зачем?Все необходимые триггеры включены, и DIV должен быть в документе.

Answer 1

Vue требуется время для визуализации элемента с v-if после того, как условие выполнено.Так что все что мне нужно ждать и модифицировать наблюдателя:

watch: {
  report (value) {
    if (value) {
      this.$nextTick().then(() => this.showReport())
    }
  }
}

Peace!

Answer 2

Чтобы заставить его работать, удалите if на необходимом элементе.

<template>
    <div id="report-chart"></div>
    <div v-if="!report">
        Loading...
    </div>
</template>

Снимите часы и переместите функцию рендеринга в смонтированный метод.

mounted () {
  this.loadReport().then(data => {this.report = data; this.showReport();})
}