使用 VueJS 在 shopify 液体中进行双循环

如何解决使用 VueJS 在 shopify 液体中进行双循环

我正在使用 VueJS 遍历 shopify 液体对象，如下所示：

items: [
          {% for product in collections['components'].products %}
            {
              title: "{{ product.title }}",handle: "{{ product.handle }}",image: "{{ product.featured_image | img_url: '400x',scale: 2 }}",product_id: "{{ product.id }}",variant_id: "{{ product.selected_or_first_available_variant.id }}",sku: "{{ product.selected_or_first_available_variant.sku }}",price: "{{ product.selected_or_first_available_variant.price | money }}",variants: [
                {% for variant in product.variants %}
                  {
                    title: "{{ variant.title }}"
                  },{% endfor %}
              ]
            },{% endfor %}
        ],

在变体属性上，我得到一个空数组，尽管我知道每个产品都有变体或至少一个变体。我怀疑语法可能是错误的。可能是什么问题？

解决方法

所以经过多次来回后，我发现您不需要在 VueJS/Javascript 代码中执行另一个循环。您只需要使用如下所示的 json 过滤器将 product.variants 分配给变体属性，变体将在数组中返回，因为它们已经在结果集中。

items: [
      {% for product in collections['components'].products %}
        {
          title: '{{ product.title }}',handle: '{{ product.handle }}',image: '{{ product.featured_image | img_url: "400x",scale: 2 }}',product_id: '{{ product.id }}',variant_id: '{{ product.selected_or_first_available_variant.id }}',sku: '{{ product.selected_or_first_available_variant.sku }}',price: '{{ product.selected_or_first_available_variant.price | money }}',variants: {{ product.variants | json }}
        },{% endfor %}
    ],

这将返回预期的结果。

如果你想要所有的产品信息，你可以简单地做

items: [
      {% for product in collections['components'].products %}
        {{ product | json }},

这将返回包括变体在内的整个产品信息。