Как загрузить компонент после нажатия вкладки на Vue JS с помощью Bootstrap Vue?

Question

У меня есть следующий код в HTML (кодируется с помощью Vue JS & Bootstrap):

<b-tabs card>
        <b-tab title="Followers" :title-link-class="'tab-title-class'">
              Page View graph here
        </b-tab>
        <b-tab title="Orders" :title-link-class="'tab-title-class'">
              Order Numbers graph here
        </b-tab>
        <b-tab title="Sales" :title-link-class="'tab-title-class'">
              <sales-analytics></sales-analytics>
        </b-tab>
        <b-tab title="Profit" :title-link-class="'tab-title-class'">
              Earning graph here
        </b-tab>
</b-tabs>

Карта содержит 4 вкладки, одна из которых называется "Продажи", и <sales-analytics></sales-analytics> это компонент, который я создал для визуализации графика с помощью библиотеки Vue-ApexCharts. Однако график не отображается автоматически при выборе вкладки. Он может работать только после того, как я нажму F12 в Chrome, перезагрузка страницы тоже не работает.

Я думаю, что компонент должен запускаться только после выбора вкладки, а не запускаться вообще при загрузке сайта (так как это вызывает проблему рендеринга, когда вкладка не выбирается при загрузке сайта). Кто-нибудь знает, как это реализовать? Или альтернативный способ решить эту проблему?

Больше материала из раздела скриптов:

<script>
   import Sales from '../analytics/Sales'

export default {
    components: {      
        'sales-analytics': Sales
}
</script>

РЕДАКТИРОВАТЬ: После небольшого поиска в Google, я нашел это: https://github.com/apertureless/vue-chartjs/issues/157 который имеет очень похожее поведение в моей ситуации, я хочу v-if и смонтирован для загрузки компонент после вкладки выбран. Кто-нибудь знает, как это сделать?

Answer 1

Спасибо всем за комментарии. И для любых будущих ссылок, я смог решить проблему с помощью v-if проверить текущую активную вкладку, а затем загрузить компонент в области видимости.

<div v-if=“activeTab === ‘sale’>

Answer 2

Согласно документации BootstrapVue, он встроен для загрузки компонентов и данных только при активации вкладки :

Иногда предпочтительнее загружать компоненты и данные только при активации вкладки, а не загружать все вкладки (и связанные данные) при рендеринге набора.

Отдельные компоненты можно лениво загружать через ленивую опору, которая при установке не монтирует содержимое до тех пор, пока она не будет активирована (показано), и будет отключена, когда вкладка деактивирована (скрыта):

      <b-tab lazy>

Также можно сделать все вкладки ленивыми, установив свойство lazy для родительского компонента:

      <b-tabs lazy>

Адаптировано к коду в вопросе:

      <b-tab lazy title="Sales" :title-link-class="'tab-title-class'">
    <sales-analytics></sales-analytics>
</b-tab>

Answer 3

component: resolve => {
            require(['./component.vue'], resolve);
        },

Это загружается, когда он используется. Может также понадобиться v-if

Answer 4

Если вы хотите принудительно перерисовать ApexCharts после выбора вкладки, вы должны вызвать метод refresh() для перерисовки диаграммы

<template>
  <div class="example">
    <apexcharts ref="chart" width="500" height="350" :options="chartOptions" :series="series"></apexcharts>
  </div>
</template>

<script>
  afterTabSelection: function() {
    this.$refs.chart.refresh()
  },
</script>