Dynamic directive modifier tied to property in BootstrapVue

Question

In the BootstrapVue accordion, each card has the following code 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.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>

I'm separating the card into a Vue component:

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

The v-b-toggle.[id] attribute is the problem. That's obviously not the correct way to do what I need to do (establish a toggling link between the title and the content). But I'm new to Vue and it's not obvious what I need to put there. What's the correct form of dynamic directive modifier?

I'm on Vue v2.6.10 and Bootstrap Vue v2.

score 1 · Accepted Answer · answered Sep 20 '19 at 14:37

Dynamic directive modifiers (values between square brackets) are only supported in Vue 2.6 and higher.

You can pass the ID of the target via passing a variable to the directive's "value":

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

Dynamic directive modifier tied to property in BootstrapVue

1 Answers1