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>

router.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 }
  ]
})

Answer 1

nextTick函数中的

this不是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); 
}

Vue.js在组件中安装的钩子无法按预期工作

1 个答案: