Vue.js 即使使用此.nextTick，Vuejs在装入（）后也无法访问dom元素。使用chartjs

这是我的子元素

<template lang="html">
  <div class="row">
    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
      <bar-chart :v-if="this.barChartReadyToBeRendered" :chart-data='null' :height="340"></bar-chart>
    </div>
    <div class="flex-col-docs col-lg-3">
      <div class="column" style="height: 150px">
        <div class="col">
            <q-select dark stack-label="Show Targets" class="select-notification"
              v-model="selectTargetNotification"
              :options="this.getTargetChangeOptions"
            />
        </div>
        <div class="col">
            <q-select dark stack-label="Agency" class="select-notification"
              v-model="selectOrgNotification"
              :options="this.getOrganisationOptions"
            />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from '../../components/BarChart'

export default {
  components: {
    BarChart
  },

.
.
/* Other code */

mounted () {
    console.log('OUTSIDE MOUNTED')
    this.$nextTick(() => {
      console.log(this.$el)
      let ctx = document.getElementById('bar-chart')
      console.log('WWWWWWWWWWWWWWWWWW')
      console.log(ctx)
      console.log(this.$el)
      this.createChart('bar-chart')
    })
  }

</script>

从“../../components/BarChart”导入条形图
导出默认值{
组成部分：{
棒形图
},
.
.
/*其他代码*/
挂载（）{
console.log（'外部安装'）
这个.$nextTick（（）=>{
console.log（这个$el）
设ctx=document.getElementById（'条形图'）
console.log（'WWWWWW'）
控制台日志（ctx）
console.log（这个$el）
此.createChart（'条形图'）
})
}

条形图是

<script>
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

<style>
</style>

从“vue chartjs”导入{Bar，mixins}
常量{reactiveProp}=mixins
导出默认值{
延伸：酒吧，
mixins:[reactiveProp]，
道具：[“选项”]，
挂载（）{
this.renderChart（this.chartData，this.options）
}
}

在我的父元素中，模板是

<template>
  <q-page padding class="row justify-center">
    <div style="width: 80vw; max-width: 100vw;">
      <div class="flex-row-docs">
        <div class="doc-container">
          <q-list no-border>
            <div class="row justify-start">
              <div class="col-6">
                <target-changes-agency></target-changes-agency>
              </div>
            </div>
            <div class="q-mb-md q-mt-md q-headline">Full coverage</div>
            <span v-if="!isNewsByIdLoaded" class="row justify-center">
              <q-spinner-mat :size="36" style="color: #027be3ff; text-align: justify; margin: 2rem;" />
            </span>
            <div class="row">
              <article-cluster :isNewsByIdLoaded="isNewsByIdLoaded"></article-cluster>
            </div>
          </q-list>
        </div>
      </div>
    </div>
  </q-page>
</template>

全覆盖

我期望console.log（ctx）和console.log（this.$el），但是这两个的输出分别是

null

和

---

我以为挂载了，这个.$nextTick（）将允许我访问DOM。我在这里缺少什么？请帮助我谢谢你

为什么你假设

document.getElementById（'bar-chart'））

是否会返回任何元素？没有创建具有该ID的元素。您要查找的是

document.getElementsByTagName（'条形图'）

，但这也不会产生任何结果，因为Vue不会在内部创建，而是将组件的根元素插入到位。因此，您可以为

条形图

组件提供一个

id

属性，该属性将自动传递给根元素

下一个问题是，只有当

v-if

中的条件真实时，

条形图组件才可见。组件首次加载时可能不是这种情况。在这个简单的示例中，我只需设置
v-if=“false”


const{Bar，mixins}=VueChartJs
常量{reactiveProp}=mixins
常量条形图=Vue.component（'条形图'{
延伸：酒吧，
mixins:[reactiveProp]，
道具：[“选项”]，
挂载（）{
//this.renderChart（this.chartData，this.options）
这个.$nextTick（（）=>{
log（'mounted bar chart component:'）；
console.log（这个$el）
});
}
});
Vue.component（“示例组件”{
模板：``，
组件：[条形图]，
挂载（）{
这个.$nextTick（（）=>{
log（'挂载的子组件：'）；
设ctx=document.getElementById（'条形图'）
控制台日志（ctx）
console.log（这个$el）
})
}
});
//创建一个新的Vue实例，并将其装载到上面id为app的div元素中
var vm=新的Vue({
el:“#应用程序”
})；
不要使用HTML元素ID，而是使用Vue的
ref
。