小编Dun*_*Hui的帖子

我正在Bootstrap-Vue编写一个网页，但我无法更改 上的文本颜色Bootstrap navbar，尤其是b-nav-item-dropdown标签。我曾尝试使用<span class="text-dark"环绕b-nav-item-dropdown标签，但没有奏效。看来， 的变体b-navbar只能将文本颜色变体设置为深色或浅色。

这是我的代码：

<div>
  <b-navbar toggleable="md" type="dark" variant="primary">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav class="pl-5" inline>

      <b-nav-item-dropdown text="Electronics">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>


      <b-nav-item-dropdown text="Sports">
        <b-dropdown-item href="/">Item 1</b-dropdown-item>
        <b-dropdown-item href="/">Item 2</b-dropdown-item>
        <b-dropdown-item href="/">Item 3</b-dropdown-item>
        <b-dropdown-item href="/">Item 4</b-dropdown-item>
      </b-nav-item-dropdown>

    </b-navbar-nav>
    <!--Login button-->
    <b-navbar-nav class="ml-auto pr-5">
      <b-button size="me">Login</b-button>
    </b-navbar-nav>

  </b-collapse>
</b-navbar>
</div>

我的目标是让所有文本b-nav-item-dropdown都变成黑色而不是灰白色。

我在 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 并安装加载选项卡被选中后的组件。有谁知道怎么做？