提交后渲染列表时如何解决转换组的问题答案

【问题标题】：how to fix problem with transition-group when rendering list after submit提交后渲染列表时如何解决转换组的问题
【发布时间】：2019-06-02 15:14:07
【问题描述】：

实际上我在使用 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>

【问题讨论】：

contact.id 可能在一次或多次迭代中未定义。
哦，是的，你说得对。列表中的传入项目没有“id”，所以我将 v:bind:key 更改为更独特。非常感谢

标签： javascript vue.js vuejs2 css-transitions

【解决方案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>，你可以通过标签属性配置它应该渲染的元素。

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

【讨论】：