Vuejs2 为什么在另一个组件中用作方法参数的v-for的索引不等于初始索引值？

我的问题是：我有一个银行账户列表，它们被循环成v-for。对于每个银行账户，我都有一个按钮可以删除它。当用户删除银行帐户时，我希望显示带有确认方法的确认模式。我必须将v-for的索引传递给方法，以知道必须从原始数组中删除哪个元素。当我传递该索引时，它与当前元素的索引不匹配。 这是一个视觉支持：

<div v-for="(bankAccount, index) in bankAccounts" :key="bankAccount.id">
  <ModalConfirm @close="showModal = false" @confirmDelete="deleteBA(index)" v-if="showModal" />

  <div>
    <section>
      <p class="color--lg light">{{ bankAccount.name }}</p>
    </section>

    <section>
      <button @click="showModal = true">
        Delete bank account
      </button>
    </section>
  </div>
</div>

因此，这里，deleteBA方法中的索引值与v-for的原始索引不同。我不明白为什么

我创建了一个实例：

---

谢谢你的帮助

问题出现在以下代码中：

{{index}} 删除银行帐户{{element} 每个帐户都有一个模式，但使用一个布尔值来切换所有模式@单击=showmodel=true

虽然可以通过为每个项添加一个模式布尔值来处理这个问题，但是没有必要为每个项都添加一个模式，最好重用相同的模式

您可以使用模态索引而不是布尔值，因此@click=showmodel=index

{{index}} 删除银行帐户{{element}

---

哇，非常感谢！我没有比这更好的答案了。