Блог

Я использую смонтированный хук в компоненте и хочу загрузить диаграмму в виде панели мониторинга, как вы можете видеть ниже.

Скрипт панели мониторинга

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

this функция nextTick не является компонентом Vue. Вы можете попробовать использовать функцию arrow

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