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

Question

实际上，在使用vue transition-group提交表单后，我在呈现更新列表时遇到了麻烦

当我使用简单的“ 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">

如product github中所述：

  

  
• 用法：
  

     

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

     

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