在 Vue Bootstrap 中动态生成指令名称

本文介绍了在 Vue Bootstrap 中动态生成指令名称的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

I'm using a dropdown from Vue bootstrap, and I want to include collapsable elements within it. What I'm trying to accomplish is to have a button that opens and closes each element within the collapsable list.

Vue 引导程序执行此操作的方式是为可折叠元素提供一个与按钮指令名称匹配的 id.

The way Vue bootstrap does this is by giving the collapsable element an id that matches up to the directive name of the button.

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

My issue is that when generating a number of items with v-for, I am not able to dynamically generate directive names (I am able to generate id names however). See my code below:

            <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>

我希望能够为下拉项提供一个指令，如 vb-toggle="'collapse' + {{index}}" 而不是像我上面所做的那样硬编码(vb-toggle="'collapse' + 0")

I would like to be able to give the dropdown item a directive like v-b-toggle="'collapse' + {{index}}" rather than hardcoding it like I've done above (v-b-toggle="'collapse' + 0")

推荐答案

您也需要简单地绑定该指令.

You need to simply bind on that directive as well.

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

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

v-b-toggle 不需要绑定 : 所以像

v-b-toggle does not need bind : so use like

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

这篇关于在 Vue Bootstrap 中动态生成指令名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！