Pug模板循环中如何动态拼接数组名遍历对应filter系列子分类数组

这个需求完全可以实现，以下是两种具体实现方案：

方案1：直接动态拼接变量名获取对应数组 #

PUG底层基于JavaScript运行，你可以通过作用域属性访问的方式获取动态变量名对应的数组，同时注意避免内外层循环的index变量重名冲突，修改后代码如下：

each val, index in filter0
  input(class='toggle' id='toggle'+index type='checkbox')
  label.title(for='toggle'+index)
    = val
  .content
    // 动态获取 filter1/filter2... 数组，内层索引用subIndex避免和外层冲突
    each subVal, subIndex in this['filter' + (index + 1)]
      ul
        li
          input(class='checkbox' id='checkbox-'+index+'-'+subIndex type='checkbox' value='value'+index+'-'+subIndex)
          label(for='checkbox-'+index+'-'+subIndex)= subVal

小提示：上面的id拼接时加入了外层index，避免不同分类下的子选项id重复导致label关联出错

方案2（更推荐）：重构数据结构避免动态变量名 #

动态拼接变量名的写法可维护性比较差，更建议直接把所有筛选规则整理为嵌套结构，代码逻辑会更清晰：
首先修改数组定义：

- let filters = [
    {title: 'Category', options: ['Category 1', 'Category 2', 'Category 3']},
    {title: 'Brand', options: ['Brand 1', 'Brand 2']},
    {title: 'Price', options: ['Price 1', 'Price 2']},
    {title: 'Color', options: ['Color 1', 'Color 2']}
  ]

然后循环逻辑可以直接写为：

each group, index in filters
  input(class='toggle' id='toggle'+index type='checkbox')
  label.title(for='toggle'+index)
    = group.title
  .content
    each option, subIndex in group.options
      ul
        li
          input(class='checkbox' id='checkbox-'+index+'-'+subIndex type='checkbox' value='value'+index+'-'+subIndex)
          label(for='checkbox-'+index+'-'+subIndex)= option

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