使用VueJS遍历Shopify Liquid时双层循环variants返回空数组如何处理？

问题原因及修复方案 #

• 尾逗号导致JS语法解析失败
  当前代码遍历variant时每个对象末尾都固定加了逗号，最后一个variant生成后会带多余的尾逗号，不符合严格JS语法规范，Vue解析配置时会识别为语法错误，最终导致variants属性判定为无效值返回空数组。
  修复代码：

variants: [
  {% for variant in product.variants %}
    {
      title: "{{ variant.title }}"
    }{% unless forloop.last %},{% endunless %}
  {% endfor %}
]

• 双引号实体编码错误
  你贴出的代码中双引号被转义为"，如果实际Liquid代码中直接使用了该HTML实体而非原生"，服务端渲染后不会被识别为JS字符串的包裹符号，会触发整段对象语法错误。
  修复方案：将所有"替换为原生双引号"。
• 特殊字符破坏语法结构
  如果variant标题中存在双引号、换行符等特殊字符，会直接打断JS字符串结构，触发语法错误。
  修复方案：输出字符串时添加escape_js过滤器处理特殊字符：

title: "{{ variant.title | escape_js }}"

验证方法 #

右键打开页面源代码，定位到这段items数组的渲染结果：

1. 如果源代码中variants数组本身就没有内容，需进一步检查collections['components']的读取权限、商品变体的公开状态
2. 如果源代码中variants数组有内容但Vue中读取为空，即可确定是JS语法解析错误，按上述方案排查即可

内容的提问来源于stack exchange，提问作者dadidaochieng