在 html 标签中添加了 vuejs 变量

Question

我正在尝试使用此下拉列表 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>

但相反，我使用 V-for 来创建多个下拉框。显然，我需要一个唯一标识符来区分单击了哪个下拉列表。这是v-b-toggle.collapse1和id=collapse1的代码.

我可以让 id 与 v-bind：id 一起使用，但我不知道如何(或者如果可能(将我的自定义变量添加到v-b-toggle.collapse1.

这是我正在尝试做的：

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

是否可以在没有 id、类、href 等标签的标签中使用变量？ 谢谢

Answer 1

这对我有用。

<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