使用vue.js在Shopify液體模板化標籤

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-綁定：關鍵屬性缺失的V型環境，以便工作一個過渡組織。

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

在此之前，嵌套在transition-group中的所有內容都將被刪除，並且僅適用於第一項。