Корневой элемент <transition-group> больше не создаётся

breaking

Обзор

Теперь <transition-group> по умолчанию больше не создаёт корневой элемент при отрисовке, но может его создавать при указании входного параметра tag.

Синтаксис в 2.x

Во Vue 2, <transition-group> какие и другие пользовательские компоненты, нуждался в корневом элементе, который по умолчанию был <span>, но настраивался через входной параметр tag.

<transition-group tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</transition-group>

Синтаксис в 3.x

Во Vue 3 теперь появилась поддержка фрагментов, поэтому компонентам больше не нужен корневой тег. Следовательно, <transition-group> по умолчанию и не отрисовывает его.

• Если уже указан входной параметр tag в коде Vue 2, как в примере выше, то всё будет работать как раньше
• Если входной параметр не указывался и стилизация или другое поведение полагается на наличие корневого элемента <span>, то добавьте tag="span" в <transition-group>:

<transition-group tag="span">
  <!-- -->
</transition-group>

См. также

• Переименованы некоторые классы transition