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

向html标签添加了vuejs变量

1 个答案: