Почему индекс 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>