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())
    }
  }
}

和平！

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();})
}

为什么Vue的v-if不会及时渲染块？

2 个答案: