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.

Troy Morehouse · Accepted Answer · 2019-09-20 14:37:59Z

1

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>

answered Sep 20, 2019 at 14:37

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic directive modifier tied to property in BootstrapVue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related