Vue — переходная группа не работает с разными типами компонентов

У меня есть проект, в котором я использую Vue Transitions для анимации сортировки и фильтрации сетки, содержащей автомобильные компоненты. Каждый элемент сетки содержит одну машину-компонент.

Проблема в том, что пользователь может приглашать новых пользователей на платформу. Эти новые пользователи / автомобили не являются теми же объектами, что и существующие объекты, каждый из которых показан в компоненте автомобиля. В этих новых объектах я показываю разные типы данных / информации.

Вот почему я решил показать этим «новым» пользователям, использующим компоненты другого типа, чем автомобильные компоненты.

Проблема в том, что оба компонента должны отображаться внутри одной и той же сетки CSS. Но когда я пытаюсь добавить оба компонента в группу перехода, эта группа перехода прерывается и больше не выполняет анимацию сортировки.

<transition-group class="grid">
   <InvitedUsers v-for="invite in Invited" />
   <Users v-for"user in Users" />
</transition-group>

Это можно обойти? Могу ли я добавить набор элементов бота в одну и ту же сетку CSS, и при этом группа перехода будет выполнять свою работу? Я пробовал следующее, но это не сработало, потому что оба набора элементов созданы в разных сетках. Но таким образом группа перехода снова работает.

<div class="grid">
   <InvitedUsers v-for="invite in Invited" />
</div>
<transition-group class="grid">
   <Users v-for"user in Users" />
</transition-group>

См. также:  Настройка приглашения PowerShell - эквивалент CMD $ M $ P $ _ $ + $ G?
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Stephen

    Однажды я боролся с той же проблемой. Мы не можем напрямую обернуть компоненты внутри ‹transition-group›, должна быть другая оболочка вокруг компонента.

    Вот пример

    <transition-group class="grid">
       <div v-for"user in Users">
         <Users />
       </div>
       <div v-for="invite in Invited">
         <InvitedUsers />
       </div>
    </transition-group>
    
    

    Возможно, вам придется немного отрегулировать контейнер сетки.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: