如何正确地使用引导-vue面板？

Question

我正在尝试将我的项目从vue-strap迁移到from vue。我很难迁移面板。当前的vue-带状代码：

<div class="col-sm-3">
    <panel is-open type="info">
        <table slot="header"><th>Search:</th></table>
        <search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" />
    </panel>
</div>

search-form是我的组件。据我所知，我需要使用引导-vue的崩溃(而不是实际崩溃)，如文档所示。但是看起来，我尝试过的每一种代码都不起作用。什么是正确的方式使用vue-引导面板？

Answer 1

标题(打开面板的按钮)由以下内容组成：

<b-card-header header-tag="header" class="p-1" role="tab">
   <b-button block href="#" v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
</b-card-header>

v-b-toggle.accordion-2 b按钮组件有一个指令，它用id = 调用b-折叠组件

在组件b-card-body，中，您可以传递组件(就像子组件)。见样本：

<b-card no-body class="mb-1">
  <b-card-header header-tag="header" class="p-1" role="tab">
    <b-button block href="#" v-b-toggle.accordion-2 variant="info">Click Here</b-button>
  </b-card-header>
  <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
    <b-card-body>
      <search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" />
    </b-card-body>
  </b-collapse>
</b-card>