代码之家 › 专栏 › 技术社区 › SamohtVII

已将vuejs变量添加到html标记

vue.js

2

SamohtVII · 技术社区 · 7 年前

我正在尝试使用这个下拉列表 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-b-toggle.collapse1 id=collapse1 .

我可以拿到身份证和v一起工作-bind:id but 我不知道如何(或者是否可能)将自定义变量添加到 v-b-toggle.折叠1 .

以下是我想做的:

    <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等标记的标记中使用变量?

1 回复 | 直到 7 年前

1

2

MomasVII 7 年前

        <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