引导模式应根据 vue 组件中单击的按钮行显示数据答案

【问题标题】：bootstrap modal should display data based on the clicked button row in a vue component引导模式应根据 vue 组件中单击的按钮行显示数据
【发布时间】：2020-04-09 15:22:22
【问题描述】：

下面的代码解释了我如何从数据库中获取数据

 <table class="table table-bordered">

          <thead>

              <tr><th>User ID</th><th>Account Number</th><th>Account Type</th><th>Account Status</th><th>Available Balance</th><th>Transactions</th></tr>
              </thead>
              <tbody>
         <tr v-for="account in data"
              :key="account.id"
              class="account-item">
           <td>{{ account.user_id }}</td><td>{{ account.account_number }}</td><td>{{ account.account_type.name }}</td><td>{{ account.account_status.status }}</td>
           <td>

            <div class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg" onClick="bindData">Available Balance</div>

        </td><td><a :href="`transactions`"><div class="btn btn-info">Last 10 transactions</div></a></td></tr>

       </tbody>
      </table>

下面是模态代码

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" height="auto">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
     <span v-for="account in data">
    <span v-if="account.account_type.id == 2 && account.id==2">{{account.amount}}</span>
    <span v-else-if="account.account_type.id == 1 && account.id== 1">{{account.amount}}</span>
</span>

    </div>
  </div>

我想要的是当一个人点击“可用余额按钮”时，只显示相关帐户的余额，而不是像现在这样的所有余额。

【问题讨论】：

因为你打印了两个金额，这意味着你在一个循环中匹配了不止一次你的 if 语句

标签： javascript jquery html vue.js vue-component

【解决方案1】：

我想你可以试试这个：

在您的表格中，循环您的帐户数据并将每个 account.id 分配给您的数据目标
在您的表格之外，再次循环您的帐户数据并将每个 account.id 分配给每个模式的 id 属性。
从那里，我认为每个数据都会被正确引用。

截图

you can see reference here

【讨论】：