PugJS 如何为表单属性绑定变量实现提交答案按问题分组

解决方案 #

你需要修改Pug模板的循环逻辑与输入框的name属性规则，具体修改如下：

1. 给外层的问题遍历添加索引，用来区分不同问题的答案分组
2. 输入框name属性按answer[问题序号][]的格式设置，同个问题下的所有输入框使用相同的name值，末尾的[]会让后端自动将同name的多个值合并为数组
3. Pug的动态属性直接使用表达式赋值即可，不需要在静态字符串里写#{}插值

修改后的完整Pug代码：

block contents
    form(action=url, method='POST')
        // 给each循环加qIdx索引，标识当前是第几个问题
        each question, qIdx in config
            h1= question.question
            .row.mb-3
                - for (var x = 0; x < question.requiredAnswers; x++)
                    // 动态拼接for属性，和对应input的id匹配
                    label.col-sm-2.col-form-label(for=`answer_${qIdx+1}_${x}`) Antwoord #{x + 1}
                    .col-sm-10
                        // name属性用answer+问题序号+[]的格式，同问题的输入name一致
                        input.form-control(
                            type='text' 
                            name=`answer${qIdx+1}[]` 
                            id=`answer_${qIdx+1}_${x}`
                        )
            hr
        button.btn.btn-primary(type='submit', value='Submit') Verzend de antwoorden

后端配置注意事项 #

如果你使用Express作为后端框架，需要确保express.urlencoded中间件开启了extended: true配置，才能正确解析带[]的表单参数为数组：

app.use(express.urlencoded({ extended: true }))

配置完成后提交表单，拿到的req.body就是你需要的格式。

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