BootstrapVue中与属性相关联的动态指令修饰符

Question

在BootstrapVue手风琴中，每一张卡都有以下代码模板：

<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">Accordion 2</b-button>
  </b-card-header>
  <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
    <b-card-body>
      <b-card-text>{{ text }}</b-card-text>
    </b-card-body>
  </b-collapse>
</b-card>

我把卡片分成Vue组件：

<template>
    <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.[id] variant="info">{{ title }}</b-button>
      </b-card-header>
      <b-collapse :id="id" visible accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text><slot></slot></b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>
</template>

<script>
export default {
    props: {
        id: String,
        title: String,
        visible: Boolean
    }
}
</script>

v-b-toggle.[id]属性是问题所在。这显然不是我需要做的事情的正确方法(在标题和内容之间建立一个切换链接)。但我对Vue并不熟悉，不太清楚我需要把什么放在那里。动态指令修饰符的正确形式是什么？

我上的是Vue v2.6.10和Bootstrap Vue v2。

Answer 1

动态指令修饰符(方括号之间的值)仅在Vue 2.6和更高版本中得到支持。

您可以通过向指令的“值”传递一个变量来传递目标的ID：

<b-button block href="#" v-b-toggle="id" variant="info">{{ title }}</b-button>