在 Shopify 液体模板中使用 vue.js 过渡标签答案

【问题标题】：Using vue.js transition tags in Shopify liquid templates在 Shopify 液体模板中使用 vue.js 过渡标签
【发布时间】：2017-09-17 19:12:33
【问题描述】：

Shopify 似乎正在删除过渡标签：

<transition name="fade"> ... </transition>

此外，当我将 v-for 循环包装在转换中时，它只会渲染第一个然后停止。控制台或 Vue 检查器中没有错误。

如果没有这些动画或让它们在液体中解析，是否有任何可能的解决方法？

为了澄清我需要转换一组可排序的产品，我正在使用过滤器方法进行切换。

v-for="product in filteredProducts"

然后是我的过滤器：

filteredProducts: function() {
  var parent = this;

  return parent.products.filter(function (product) {

    if(parent.selected.length == 0) {
      return product;
    } else {

      console.log(product.id);

      for (var i = parent.selected.length - 1; i >= 0; i--) {
        if(parent.selected[i].products.includes(product.id)) {
          return product;
        }
      }

    }

  });

},

【问题讨论】：

标签： vue.js shopify liquid

【解决方案1】：

事实证明，问题根本不在于 Shopify，而在于 v-for 上缺少 v-bind:key 属性，以便与过渡组一起使用。

<div v-for="product in filteredProducts" v-if="product.available" v-bind:key="product">

在此之前嵌套在转换组中的所有内容都被删除，并且仅适用于第一项。

【讨论】：