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

Question

我的问题是下面的一个：我有银行账户的名单，他们是在一个V型的循环。对于每一个银行账号，我有一个按钮，可以删除它。当用户删除一个银行账号，我要显示一个确认方法，确认模式。我到V为的索引传递给知道我有从原始数组中删除该元件的方法。当我通过了指数，它不匹配当前元素的索引。这里是一个可视化支持：

<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型为原来的指数相同。我不明白为什么！

我创建了一个活生生的例子：

https://codesandbox.io/s/6jo79vr1lk

谢谢你的帮助 ！

Answer 1

这些问题是在下面的代码：

<template>
  <div class="hello card-container">
    <ul v-for="(element, index) in elements" :key="index">
      <li class="card">
        <div>{{ index }}</div>
        <div>
          <button @click="showModal = true;">Delete bank account {{element}}</button>
        </div>
        <ModalConfirm
          @close="showModal = false;"
          @confirmDelete="deleteBA(index);"
          v-if="showModal"
        />
      </li>
    </ul>
  </div>
</template>

你必须为每个帐户一个模式，而是使用一个布尔值来切换所有。 @click="showModal = true;"

当然还有其他方法来处理，通过增加一个模式布尔每个项目，这是没有必要使每个项目一个模式，更好地重复使用相同的模式。

您可以使用模式指数，而不是一个布尔值，因此@click="showModal = index"

<template>
  <div class="hello card-container">
    <ul v-for="(element, index) in elements" :key="index">
      <li class="card">
        <div>{{ index }}</div>
        <div>
          <button @click="showModal = index;">Delete bank account {{element}}</button>
        </div>
      </li>
    </ul>
    <ModalConfirm
      @close="showModal = -1"
      @confirmDelete="deleteBA(showModal);"
      v-if="showModal >= 0"
    />
  </div>
</template>