Применить группу переходов vuejs к сетке 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>