动态添加类后，javascript（vue）中的拼接未按预期工作

我正在尝试使用数组拼接方法从数组中删除元素。 我还使用animate.css，在删除元素之前动态添加类“fadeOutDown”。然后我使用超时函数等待动画完成，并使用索引从数组中删除元素

当我单击delete按钮时，元素的索引将执行动画，但另外，下一个索引也将从DOM中删除，但不会从数组中删除

下面是用于删除元素的html和js函数：

<ul class="list-group todos mx-auto text-light">
  <li v-for="(todo , i) in filterTodo" :key="i" 
   class="list-group-item d-flex justify-content-between align-items-center 
   animated slideInUp slow">
   <span>{{ todo }}</span>
   <i @click="removeTodo(i , $event)" class="fa fa-trash-o delete">x</i>
  </li>
</ul>

---

问题是使用

索引

作为

键

<li
  v-for="(todo , i) in filterTodo"
  :key="i" // this will make that bug.
...

---

请把你的句子分成几个句子。现在很难理解。您可以始终使用动画组件来确保dom正常工作。不要使用拼接组件，用过滤器替换整个阵列（不要设置超时）。我不知道是钥匙引起了问题。。。这是我在这里的第一个问题，非常感谢您的回复和您的时间。。。

<li
  v-for="(todo , i) in filterTodo"
  :key="i" // this will make that bug.
...

<li
  v-for="(todo , i) in filterTodo"
  :key="todo"
...