javascript - 组件中的 Vuejs 挂载钩子未按预期工作

Question

我在组件中使用挂载的钩子，并希望在仪表板视图上加载图表，如下所示。

仪表板脚本

export default {
    name: 'Dashboard',
    mounted() {

        console.log(this.$el); //--> console output -> empty
        const self = this;
        this.$nextTick(function () {
            // some init codes for chart implementation
            console.log(self.$el); //--> console output -> empty also.
        }
    }
}

我有一个 App.vue 文件用作容器。它具有默认的模板结构（我的意思是没有什么特别的）。如何理解组件加载？

我认为; 加载mounted()时触发钩子。App.vue但此时仍未创建仪表板组件 DOM。所以我决定使用nextTick事件。但它也像mounted()钩子一样。我有点困惑。

编辑：这个问题是F5在键盘上按下按钮时引起的。

编辑 2：App.vue

<template>
    <section id="app" class="container-fluid">
        <div class="content">
            <router-view />
        </div>
    </section>
</template>

路由器.js

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Dashboard }
  ]
})

标签： javascriptvue.jsvuejs2vue-component

Answer 1

thisnextTick 函数中的不是 Vue 组件。您可以尝试使用箭头功能

this.$nextTick(() => {
    // some init codes for chart implementation
    console.log(this.$el); 
}

或关闭：

var self = this
this.$nextTick(() => {
    // some init codes for chart implementation
    console.log(self.$el); 
}