PugJS 尝试在表单属性上使用变量值

Question

我目前正在尝试使用 PugJS 进行测验。当表单为 posted.

时，我正在尝试对正文中的答案进行分组

目前，当我post以下表格时，我得到了这个数据：

console.log(JSON.stringify(req.body));

returns 以下：{"answer":["a","b","c","d","e","f"]}

所有数据都在同一个“answer”对象中。在我的 PugJS 文件中，我执行以下操作：

block contents
    form(action=url, method='POST')
        each question in config
            h1= question.question
            .row.mb-3
                - for (var x = 0; x < question.requiredAnswers; x++)
                    label.col-sm-2.col-form-label(for='answer') Antwoord #{x + 1}
                    .col-sm-10
                        input.form-control(type='text' name='answer' id='answer')
            hr
        button.btn.btn-primary(type='submit', value='Submit') Verzend de antwoorden

如你所见，我一直使用相同的标签（for='answer'）和输入（name='answer' id='answer'）

我尝试使用变量 x 将对象更改为：label(for='answer #{x + 1}') 和 input(name='answer #{x + 1}' id='answer #{x + 1}')

我想要的输出： {"answer1":["a"], "answer2":["b","c"], "answer3":["d","e","f"]}

我也尝试使用 #{x + 1} 转义变量，但没有成功！

Answer 1

浏览器将仅以简单的键值对形式提交表单参数。如果有多个同名key，则原样重复提交。我认为是 Express body-parser 中间件将具有相同名称的键转换为数组。

在 Express 中，如果 someParameter 在您的表单中只出现一次，则 req.body.someParameter 是一个字符串值。如果多次收到该参数，则为字符串数组。

doctype html
html
  body
    //- Test data:
    - const config = [ { requiredAnswers: 1}, { requiredAnswers: 2},{ requiredAnswers: 3}]
    form(method="post")
      each question,i in config
        p Q#{i+1}
          ul 
            - for (let x=0; x<question.requiredAnswers; x++)
              label(for="Q"+i+"A"+x) Antwoord #{x+1} 
              input(name="answer"+(i+1) id="Q"+i+"A"+x)
              br
      input(type="submit")

点击上面的 labels 会正确地将焦点设置到每个相应的输入框。当使用与您使用的相同的值提交时，浏览器会在请求负载中发送以下内容：

answer1=a&answer2=b&answer2=c&answer3=d&answer3=e&answer3=f

服务器上的

和 req.body 是：

{"answer1":"a","answer2":["b","c"],"answer3":["d","e","f"]}

PugJS 尝试在表单属性上使用变量值

PugJS trying to use variable values on form attributes

node.js

pug