html - 我使用了 bootstrap-Vue，这个问题与在 for 循环中基于 @click 事件呈现数据有关

Question

我使用 bootstrap-vue 在表格中创建按钮。要求是获取被点击按钮的数据。但是由于我使用了 for 循环，即使我单击了 3 个按钮中的任何一个（数字基于 for 循环），在单击 3 个按钮中的任何一个时，所有 3 个按钮的数据都会呈现出来。我尝试使用“collapse-{{index}}”，以便索引值可能会改变。但是如果使用它，我会收到模块错误。

<b-tbody>
          <b-tr v-for="(_,index) in gradableItems" :key="index">
            <b-td>
              <div>
                <b-button
                  :class="visible ? null : 'collapsed'"
                  :aria-expanded="visible ? 'true' : 'false'"
                  aria-controls="collapse-4"
                  @click="fetchGIChildren({gradableItemId:gradableItems[index].id+'',userID:'701709', giIndex: index}), visible = !visible"
                ></b-button>
              </div>
              {{gradableItems[index].id+" "+gradableItems[index].name}}
              <table>
                <b-collapse id="collapse-4" v-model="visible" class="mt-2">
                  <tr v-for="(_,childIndex) in gradableItems[index].children" :key="childIndex">
                    <td>{{gradableItems[index].children[childIndex].status +' '+ gradableItems[index].children[childIndex].name}}</td>
                  </tr>
                </b-collapse>
              </table>

标签： htmlcssvue.jsbootstrap-4bootstrap-vue