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库绘制图形的组件。但是，选择选项卡后，图形不会自动呈现。只有在我在Chrome上单击F12后，它才能运行，重新加载页面也不起作用。

我认为该组件仅应在选择选项卡之后运行，而不是在加载站点时完全运行（因为这会导致在加载站点时未选择选项卡时导致渲染问题）。有人知道如何实现吗？还是解决此问题的另一种方法？

脚本部分的更多内容：

<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

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

使用时将其加载。可能还需要v-if

Answer 3

如果要在选择选项卡后强制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>

Answer 4

根据BootstrapVue docs，它内置于仅在激活选项卡时加载组件和数据：

<块引用>

有时更喜欢仅在以下情况下加载组件和数据激活选项卡，而不是加载所有选项卡（和相关数据）渲染集合时。

单个组件可以通过lazy prop进行延迟加载，设置时不会挂载的内容，直到它被已激活（显示），并且在选项卡停用时将被卸载（隐藏）：

<b-tab lazy>

<块引用>

还可以通过在父组件：

<b-tabs lazy>

根据问题中的代码改编：

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

此解决方案的缺点：不能有条件地使用 lazy 指令。这意味着，如果您使用 v-for 呈现它们，则不能延迟加载某些选项卡，而不能延迟加载某些选项卡。

在带有Bootstrap Vue的Vue JS上单击选项卡后，如何加载组件？

4 个答案: