如何在Pug表单的onSubmit事件中正确传递post._id变量？

你的问题出在Pug属性内的变量插值方式错误，先看你的原代码：

each post in posts    
   p(class="postContent") #{post.content}

   form(method='post' id="likeForm" target="invis" onSubmit="addLike(`${post._id}`)")

为什么之前的写法无效？ #

1. addLike(${post._id})的问题：Pug中双引号包裹的属性值里，反引号模板字符串不会被解析，${post._id}会被当成普通文本，生成的HTML会出现引号嵌套错误，浏览器无法正确识别这个函数调用。
2. addLike(#{post._id})的问题：直接用#{}插值后，生成的HTML里post._id没有被引号包裹，如果它是字符串类型（比如MongoDB的ObjectId），JS会把它当作未定义的标识符，导致语法报错。

正确的几种写法 #

写法1：使用Pug的表达式绑定（推荐）

用=声明属性值为JS表达式，同时用反引号包裹函数调用，这样Pug会正确解析变量：

each post in posts    
   p(class="postContent") #{post.content}

   form(method='post' id="likeForm" target="invis" onSubmit=`addLike('${post._id}')`)

生成的HTML会是：

<form method="post" id="likeForm" target="invis" onSubmit="addLike('你的postId值')"></form>

写法2：属性内字符串拼接

如果习惯用双引号，也可以用字符串拼接的方式：

form(method='post' id="likeForm" target="invis" onSubmit="addLike('" + post._id + "')")

写法3：使用data属性（更优的解耦写法）

不写内联JS，给form加一个data-post-id属性存储id，然后通过事件委托获取：

each post in posts    
   p(class="postContent") #{post.content}

   form(method='post' id="likeForm" target="invis" data-post-id=post._id)

对应的JS代码：

// 全局监听提交事件
document.addEventListener('submit', function(e) {
  const form = e.target;
  // 只处理目标form
  if (form.id === 'likeForm') {
    e.preventDefault(); // 根据需求决定是否阻止默认提交
    const postId = form.dataset.postId;
    addLike(postId);
  }
});

这种方式避免了内联JS，代码更易维护，也符合现代前端的实践规范。

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