Mit vue.js Übergang Tags in Shopify Flüssigkeit Vorlagen

Question

Es scheint, dass Shopify den Übergang-Tag zu entfernen:

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

Außerdem, wenn ich meine V-for-Schleife im Übergang wickeln Sie es macht nur die ersten hört dann auf. Keine Fehler in der Konsole oder im Vue Inspector.

Gibt es irgendwelche Arbeitsumgebungen für die Animation ohne diese oder sie in Flüssigkeit zu parsen?

Um zu klären, muss ich eine sortierbare Gruppe von Produkten, die ich benutze die Filtermethode auf umschalten.

v-for="product in filteredProducts" 

Dann ist mein Filter:

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

Es stellt sich heraus das Problem überhaupt nicht mit Shopify war, sondern der v-bind: key-Attribut fehlt auf v-für, um mit zu arbeiten eine Übergangsgruppe.

Davor wurde alles verschachtelt in der Übergangsgruppe entfernt, und würde nur für das erste Element funktionieren.