如何使用循环在 Pug 中创建可切换的 Bootstrap？

Question

这是我的代码

div
    ul.nav.nav-tabs(role='tablist')
            //- li.active(role='presentation')
            //-     a(href='#session1', aria-controls='session1', role='tab', data-toggle='tab') Session 1
            //- li(role='presentation')
            //-     a(href='#session2', aria-controls='session2', role='tab', data-toggle='tab') Session 2
            //- li(role='presentation')
            //-     a(href='#session3', aria-controls='session3', role='tab', data-toggle='tab') Session 3
            //- li(role='presentation')
            //-     a(href='#session4', aria-controls='session4', role='tab', data-toggle='tab') Session 4
            each num in !{sessionsNumber}
                li(role='presentation')
                    a(href='#session' + num, aria-controls='session' + num, role='tab', data-toggle='tab') Session #{num};
    .tab-content
            #session1.tab-pane.active(role='tabpanel')
                table#myTable1.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session2.tab-pane(role='tabpanel')
                table#myTable2.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session3.tab-pane(role='tabpanel')
                table#myTable3.table.table-striped.table-bordered(cellspacing="0" width="100%")
            #session4.tab-pane(role='tabpanel')
                table#myTable4.table.table-striped.table-bordered(cellspacing="0" width="100%")

我注释掉的部分按预期工作。但我想将其更改为循环。 !{sessionNumber} 是我在此处快速后端呈现的内容。

 res.render('schedule', { sessionsNumber: JSON.stringify([1,2,3,4])})

我在带有 document.reay 的脚本标记之一中有 console.log ！{sessionsNumber} ，它按预期将其显示为数组。 我只是不确定为什么当我将它更改为每个循环时它不起作用。我还检查了页面，ul标签下没有html组件。

任何帮助将不胜感激！

Answer 1

res.render('schedule', { sessionsNumber: JSON.stringify([1,2,3,4])}) 将数组作为字符串发送到视图，因为您正在对其进行 json.stringifying。那没有必要。 而是尝试像这样发送数组 res.render('schedule', { sessionsNumber: [1,2,3,4]}) 然后迭代它

each num in sessionsNumber
 li(role='presentation')
   a(href='#session' + num, aria-controls='session' + num, role='tab', data-toggle='tab') Session #{num}