将 vuejs 转换组应用于 Bootstrap 网格答案

【问题标题】：Apply vuejs transition-group to Bootstrap grid将 vuejs 转换组应用于 Bootstrap 网格
【发布时间】：2018-12-04 03:22:29
【问题描述】：

我正在尝试将 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 网格的解决方法吗？

【问题讨论】：

标签： html css bootstrap-4 vuejs-transition

【解决方案1】：

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

默认情况下，span 由 transition-group 呈现。您可以使用tag 属性对其进行更改，然后像这样简单地添加class="col-md-6"：

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

【讨论】：