nuxt.js 应用程序中的 BootstrapVue <b-tabs> 显示所有选项卡的内容，而不仅仅是活动选项卡

Question

我用 BootstrapVue 创建了一个测试 nuxt.js 应用程序。我使用了 <b-tabs>，但页面上显示的不是活动选项卡的内容，而是所有选项卡的内容。

我有这样的<b-tabs>：

<template>
  <b-card no-body>
    <b-tabs card >
      <b-tab active title="A" no-body /><p>Content A</p></b-tab>
      <b-tab title="B" no-body /><p>Content B</p></b-tab>
      <b-tab title="C" no-body /><p>Content C</p></b-tab>
    </b-tabs>
  </b-card>
</template>

无论选择哪个选项卡，页面都会显示所有内容，如下所示：

Content A

Content B

Content C

但是，如果我从上面的代码中删除 <p></p> 标签，内容的显示方式会有细微差别。

对于第一个选项卡：

Content A Content B Content C

对于第二个选项卡：

Content A

Content B Content C

对于第三个选项卡：

Content A Content B

Content C

这可能是什么原因造成的？我在 'plain' Vue.js 应用程序中使用了 BootstrapVue，但我没有遇到此类问题。我在文档中也没有看到任何关于任何所需样式的内容。

Answer 1

我自己试过了，本质上是标签关闭的问题。

<template>
  <b-card no-body>
    <b-tabs card>
      <b-tab active title="A" no-body><p>Content A</p></b-tab>
      <b-tab title="B" no-body><p>Content B</p></b-tab>
      <b-tab title="C" no-body><p>Content C</p></b-tab>
    </b-tabs>
  </b-card>
</template>

尝试使用ESlint，它可以极大地帮助您立即发现错误！

nuxt.js 应用程序中的 BootstrapVue <b-tabs> 显示所有选项卡的内容，而不仅仅是活动选项卡

BootstrapVue <b-tabs> in a nuxt.js app is displaying contents of all tabs instead of just the active tab

nuxt.js

bootstrap-vue