Question

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

Vue引导程序的方法是为可折叠元素提供一个与按钮的指令名称相匹配的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

你也需要简单地绑定该指令。

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

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

在Vue Bootstrap

1 个答案: