vue.js - 如何使用 vuejs 数据属性作为 html 属性

问题描述

我正在尝试使用循环中的卡片组件在 vuejs 中使用引导程序创建手风琴。我想使用命令变量的 id 属性，以便每张卡片都有它的 id，这样当我们点击一张卡片时，只有这张卡片会打开，而不是所有卡片。这是我的代码：

<div id="accordion">
  <div class="card" v-for="commande in commandes.data" :key="commande.id">
     <div class="card-header" :id="commande.id">
        <h3 class="card-title">
           <button class="btn btn-link col-md-12" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <div class="text-primary">{{commande.id}}</div>
           </button>
        </h3>
     </div>
     <!-- /.card-header -->
       <div id="collapseOne" class="collapse show" :aria-labelledby="commande.id" data-parent="#accordion">
          <div class="card-body table-responsive p-0">
             <table class="table table-hover">
                <tbody>                      
                   <tr v-for="(produit, index) in commande.produits" :key="index">
                      <td>{{produit.designation}}</td>
                      <td>{{produit.prix_vente}}</td>
                      <td>{{produit.pivot.quantite}}</td>
                      <td>{{produit.prix_vente*produit.pivot.quantite}}</td>                  
                    </tr>
                </tbody>
             </table>
          </div>
        </div>
      <!-- /.card-body -->
      <div class="card-footer">
         <pagination :data="commandes" @pagination-change-page="getResults"></pagination>
      </div>
   </div>
 </div>

但是当我点击一张卡片时，所有其他卡片都会打开。这似乎是由于标签的data-target属性和包含的标签。我不能在属性中放置变量。如何解决这个问题？<button>card-headerattribute id<div>card-bodydata-target

标签： vue.jsbootstrap-4

vue.js - 如何使用 vuejs 数据属性作为 html 属性

问题描述

解决方案

推荐阅读