web-dev-qa-db-ja.com

タブがクリックされた後にコンポーネントをロードする方法Vue JS with Bootstrap Vue？

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つのタブがあり、そのうちの1つは「Sales」というタイトルで、<sales-analytics></sales-analytics>は、Vue-ApexChartsライブラリを使用してグラフをレンダリングするために作成したコンポーネントです。ただし、タブを選択してもグラフは自動的に表示されません。 ChromeでF12をクリックした後にのみ実行でき、ページの再読み込みも機能しません。

コンポーネントは、サイトの読み込み時に完全に実行するのではなく、タブが選択された後にのみ実行する必要があると考えています（これにより、サイトの読み込み時にタブが選択されていない場合にレンダリングの問題が発生します）。誰かがこれを実装する方法を知っていますか？または、この問題を解決する別の方法はありますか？

スクリプトセクションからのより多くのもの：

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

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

編集：かなりのグーグルの後、私はこれを見つけました： https://github.com/apertureless/vue-chartjs/issues/157 これは私の状況と非常によく似た動作をします、私はしたいですv-タブが選択された後にコンポーネントをロードするためにマウントされている場合。誰もがそれを行う方法を知っていますか？

javascriptvue.jstabsbootstrap-vueapexcharts
4
Duncan Hui

コメントありがとうございます。また、今後の参考のために、v-ifを使用して現在アクティブなタブを確認し、スコープの下にコンポーネントをロードすることで、問題を解決することができました。

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

タブを選択した後に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
junedchhipa
component: resolve => {
            require(['./component.vue'], resolve);
        },

これは、使用時にロードされます。 v-ifも必要な場合があります

0
qihan fu