как исправить проблему с transition-group при рендеринге списка после отправки - PullRequest
Новая
       13

как исправить проблему с transition-group при рендеринге списка после отправки

0 голосов
/ 08 января 2019

На самом деле у меня проблемы с отображением обновленного списка после отправки формы с помощью 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>

1 Ответ

0 голосов
/ 08 января 2019

Попробуйте связать ваш 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> должен иметь с уникальным ключом , чтобы анимации работали должным образом.

...