Применить vuejs transition-group к сетке Bootstrap

Question

Я пытаюсь применить переходы vuejs к сеткам Bootstrap, но это полностью разрушает систему сетки, потому что группа переходов изменяет DOM и добавляет новый тег между row а также col-md-6 теги. пример:

<div class="row">
  <transition-group name="list">
    <div class="col-md-6" v-for="product in products" :key="product.id">\ 
      My product content here
    </div>
  </transition-group>

Когда это отображается, оно изменяется на:

<div class="row">
  <span>
    <div class="col-md-6" v-for="product in products" :key="product.id">\ 
      My product content here
    </div>
  </span>
</div>

Новый span тег путается с сеткой, так как .col-md-6 больше не является прямым ребенком .row,

Кто-нибудь знает обходной путь для этого, который все еще использует сетки Bootstrap?

Answer 1

Вы можете напрямую добавить класс в группу переходов.

По умолчанию span предоставляется transition-group, Вы меняете это с tag атрибут и просто добавьте class="col-md-6" как это:

<transition-group name="list" tag="div" class="col-md-6"></transition-group>