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 个选项卡，其中一个名为“销售”，它<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-if 并安装加载选择选项卡后的组件。有人知道该怎么做吗？

4

4 回答 4

4

谢谢大家的评论。对于任何未来的参考，我能够通过v-if检查当前活动选项卡来解决问题，然后在范围内加载组件。

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

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

有时，最好仅在激活选项卡时加载组件和数据，而不是在渲染集合时加载所有选项卡（和相关数据）。

单个组件可以通过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.

于 2021-04-06T12:35:31.547 回答
1 
component: resolve => {
            require(['./component.vue'], resolve);
        },

This is loaded when it is used. May also need v-if

于 2018-10-31T02:53:39.243 回答
0

如果要强制 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>
于 2018-10-31T20:07:21.453 回答