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

Question

我的问题如下：我有一个银行账户列表，它们在 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的原始索引不一样。我不明白为什么！

我创建了一个实例：

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>

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

Why the index of a v-for used as a method parameter in another component doesn't equal to the initial index value?

modal-dialog

vue-component

vuejs2

v-for