vue.js - 在 Vue Bootstrap 中动态生成指令名称

Question

我正在使用 Vue bootstrap 的下拉菜单，我想在其中包含可折叠元素。我想要完成的是有一个按钮可以打开和关闭可折叠列表中的每个元素。

Vue Bootstrap 执行此操作的方式是为可折叠元素提供一个与按钮的指令名称相匹配的 ID。

我的问题是，当使用 v-for 生成多个项目时，我无法动态生成指令名称(但是我能够生成 id 名称)。请参阅下面的代码:

            <b-dropdown-item-button disabled v-for="(superPortfolio, index) in portfolio.hierarchy">{{superPortfolio.superPortfolioName}}<b-btn v-b-toggle="'collapse' + 0" variant="primary"></b-btn>
              <b-collapse v-bind:id="'collapse' + index" class="mt-2">
                <b-card>

                </b-card>
              </b-collapse>
            </b-dropdown-item-button>

        </b-nav-item-dropdown>

我希望能够给下拉项一个像 v-b-toggle="'collapse' + {{index}}" 这样的指令，而不是像我上面那样硬编码它( v-b-toggle="'collapse' + 0")

Answer 1

您还需要简单地绑定(bind)该指令。

<b-btn v-bind:v-b-toggle="'collapse' + index" variant="primary"></b-btn>

https://v2.vuejs.org/v2/api/#v-bind

编辑:v-b-toggle 不需要绑定(bind) : 所以像这样使用

<b-btn v-b-toggle="'collapse' + index" variant="primary"></b-btn>