Почему в transitions-group анимация работает на элементе с неправильным индексом?

Question

[hckn]

Исли нажать на кнопку закрытия сообщения, например ONE, то можно видеть как оно мгновенно схлопывается, а анимация удаления играет на последнем элементе - https://codesandbox.io/s/y739ry1v39

Почему так происходит и как исправить?

Answer 1

[0xD34F]

Косяк ровно тот же, что и в вашем предыдущем вопросе. Сделайте вместо индекса нормальный key - и всё станет хорошо. А сейчас что - элемент удалили, неважно какой, всегда изменяется key последнего элемента (вернее сказать, элемента с таким key вообще больше нет) - поэтому он и анимируется.

Comments

[hckn]

Да. но что делать если нету значения для уникального ключа? Например, два оинаковых message. ID у них нету. Date.now() тоже не работает.

[0xD34F]

hckn, ну так сделайте уникальные id. Да вот хотя бы пройдите по массиву и добавьте в качестве id индекс элемента, типа так (и не вздумайте путать эти id с индексами в v-for - первые, в отличие от вторых, своего значения для конкретного элемента не изменят).

[hckn]

Ок. Тут работает. Но при переносе не работает.

Я сделал геттер (сообщения эти прилетают с АПИ)

notifications (state) {
    return state.notifications.map((n, id) => ({ ...n, id }))
  }

В шаблоне айдишники видно

<transition-group name="notification" class="notifications-wrapper">
      <div v-for="(notification, i) in notifications" :key="notification.id" class="notification shadow-lg" >
        {{notification}}
        <p class="headline4">{{notification.message}}</p>
        <button @click="closeNotification(i)">close</button>
      </div>
</transition-group>

Обновляю массив в мутации так

SET_NOTIFICATIONS (state, notification) {
    state.notifications.push(notification)
}

Удаляю (кнопка закрытия) так

FIND_AND_CLEAR_NOTIFICATION (state, i) {
    state.notifications.splice(i, 1)
  }

Что ему не нравится? Опять с конца удаляет.

[hckn]

Все, я все понял. В геттере нельзя ставить, надо чтобы в сторе былы айдишники. Спасибо.