Question

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;
        }
      }

    }

  });

},

Answer 1

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

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

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

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

1 个答案: