6

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 これは私の状況と非常によく似た動作をしています。タブが選択された後のコンポーネント。誰でもそれを行う方法を知っていますか?

4

4 に答える 4

4

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

<div v-if=“activeTab === ‘sale’&gt;
于 2018-11-01T13:03:00.590 に答える