在 Pug 中循环多个变量

Question

我正在努力寻找在循环中声明这些变量的正确方法。我需要变量在块中的两个不同位置循环。

第一个 const breadcrumbsItems：必须在 span 标记中循环。

第二个常量breadcrumbsAttributes：必须在(data-trigger="")中循环

谁能帮我解决这个问题？ 提前致谢

   
- const breadcrumbsItems = [ `John`, `Jane`, `Jefferson`,  `Ramirez` ]
- const breadcrumbsAttributes = ['tabOne','tabTwo', 'tabThree', 'tabFour']
     
  .breadcrumbs
    ul.breadcrumbs__list
      li.breadcrumbs__elements
        a.breadcrumbs__tabs.is-selected(data-trigger="#{const breadcrumbsAttributes}")
          span.breadcrumbs__item #{const breadcrumbsItems}
          svg.breadcrumbs__icon
            use(xlink:href="assets/defs.svg#icon-close")

Answer 1

您可以循环其中一个数组，然后使用循环的索引来访问另一个数组中的相应值：

ul
  each item, i in breadcrumbItems
    li
      button(data-trigger= breadcrumbsAttributes[i])
        span #{item}

此外，尝试始终使用按钮而不是链接来执行不会将用户导航到新内容的操作。

Answer 2

您需要嵌套迭代。您可以使用每个。 这是一个您可以匹配以适合您的标记的示例。

也可以在code section of the docs 下找到示例。

如果您想快速使用一些 pug 标记，可以将此代码放入 codepen.io 并添加 pug 作为 html 预处理器。

- const breadcrumbsItems = [ `John`, `Jane`, `Jefferson`,  `Ramirez` ]
- const breadcrumbsAttributes = ['tabOne','tabTwo', 'tabThree', 'tabFour']

each item in breadcrumbsItems
  a.example(data-trigger=item) #{item}
    each attr in breadcrumbsAttributes
      div #{attr}

另一个常见的混淆是何时使用#{}，何时不使用。 如果您要声明这样的属性 a(data-trigger=var)，则括号内部将被视为 javascript。所以没有#{}。

如果您在文本或标记区域内，请使用 #{}。