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

Posted 2023-02-16

【中文标题】提交后渲染列表时如何解决转换组的问题

【英文标题】：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 更改为更独特。非常感谢

【参考方案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> 中的每个孩子都必须唯一键控，动画才能正常工作。