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

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

0 голосов
/ 31 октября 2018

У меня есть следующий код в 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>

EDIT: После недолгих поисков я нашел это: https://github.com/apertureless/vue-chartjs/issues/157 Который имеет поведение, очень похожее на мою ситуацию, я хочу v-if и смонтирован для загрузки компонента после выбора вкладки. Кто-нибудь знает, как это сделать?

Ответы [ 3 ]

0 голосов
/ 31 октября 2018

Если вы хотите принудительно перерисовать 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>
0 голосов
/ 01 ноября 2018

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

<div v-if=“activeTab === ‘sale’>
0 голосов
/ 31 октября 2018 
component: resolve => {
            require(['./component.vue'], resolve);
        },

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

...