将 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

您可以直接向转换组添加一个类。

默认情况下 aspan由transition-group. 您可以使用tag属性更改它并简单地添加class="col-md-6"如下内容：

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