Added vuejs variable to html tag

Question

I am trying to use this dropdown list https://bootstrap-vue.js.org/docs/components/collapse/

<div>
  <b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
  <b-collapse id="collapse1" class="mt-2">
    <b-card>
      <p class="card-text">Collapse contents Here</p>
    </b-card>
  </b-collapse>
</div>

but instead i'm using a v-for to create multiple drop down boxes. Obviously I need a unique identifier to distinguish which drop down was clicked. Which is this code v-b-toggle.collapse1 and id=collapse1.

I can get the id to work with v-bind:id but I don't know how (Or if it's possible) to add my custom variable to v-b-toggle.collapse1.

Here is what I am trying to do:

    <div role="tablist" class="client_contacts">
        <h2>Clients</h2>
        <div v-for="clients in getClientContacts">
            <b-btn block href="#" v-b-toggle.{{clients.id}} variant="info" role="button">
                {{ clients.first_name }} {{ clients.last_name }}
            </b-btn>
            <b-collapse v-bind:id="clients.id" accordion="my-accordion" role="tabpanel">
                <p class="card-text">
                    Some test text
                </p>
            </b-collapse>
        </div>
    </div>

Is it possible to use variables in tags without an id, class, href etc tag? Thanks

Answer 1

This works for me.

        <div v-for="clients in getClientContacts">
            <b-btn block href="#" v-b-toggle="'accordion-' + clients.first_name" variant="info">
                {{ clients.first_name }} {{ clients.last_name }}
            </b-btn>
            <b-collapse :id="'accordion-' + clients.first_name" accordion="my-accordion" role="tabpanel">
                <p class="card-text">
                I start opened because <code>visible</code> is <code>true</code>
                </p>
            </b-collapse>
        </div>

https://github.com/bootstrap-vue/bootstrap-vue/issues/1420