如何解决提交后呈现列表时过渡组的问题

Question

实际上我在使用 vue 过渡组提交表单后呈现更新列表时遇到了麻烦

当我使用简单的"ul"标签时没有问题，但是当我想通过转换组进行此转换时，控制台中出现错误

" 孩子必须用 ：li 键。

<transition-group name="list-complete" tag="ul" class="list">
  <li class="item list-complete-item " v-for="contact in contacts" v-bind:key="contact.id">
    <div class="item__desc">
      <p class="paragraph">
        <span class="bold">{{contact.name}}</span>
      </p>
      <p class="paragraph">
        <span class="bold">Mail:</span>
        {{contact.email}}
      </p>
      <p class="paragraph">
        <span class="bold">Street:</span>
        {{contact.address.street}}
      </p>
      <p class="paragraph">
        <span class="bold">City:</span>
        {{contact.address.city}}
      </p>
    </div>
   </li>

Answer 1

尝试将您的key绑定到唯一数据，如下所示index：

  <li class="item list-complete-item " v-for="(contact,index) in contacts" v-bind:key="index">

如official docs所述：

• 用法：

<transition-group>用作多个元素/组件的过渡效果。><transition-group>呈现一个真正的 DOM 元素。默认情况下，它呈现一个<span>，您可以通过 tag 属性配置它应该呈现的元素。

请注意，<transition-group>中的每个子项都必须具有唯一的键控，动画才能正常工作。