如何在（Jade）pug中向onclick函数传递值？

Question

我刚开始学习Jade，遇到了这个问题。我看了StackOverflow上的所有帖子，尝试了一切，但还是无法解决。

我尝试过的事情：

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog( #{val.link} )')

错误

1:8 Uncaught SyntaxError: Invalid or unexpected token

将其更改为!{val.link}

错误

Uncaught SyntaxError: Unexpected token .

将其更改为"!{val.link}"和"#{val.link}"只会给我返回字符串，这是可以理解的。顺便说一下，val.link是一个字符串。

仅提供val.link会显示未捕获的引用错误：val未定义

现在我已经没有选择了，需要帮助，谢谢。

感谢您的阅读。

- Saras Arya

---

你在哪里设置/定义 val？ - perennial_

Answer 1

当向html元素添加属性时，您已经处于pug的范围内，因此可以像使用普通js变量一样使用pug变量。

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog(' + val.link + ')')

- perennial_

Answer 2

我刚刚使用了带有前缀引号和后缀引号的代码，它成功了：

button(type='button', onclick='someFunction("'+ yourObject.id +'")' ) PressMe

- Matheus Santz

---

只有这个解决方案适用于我。 - Mohammed Riyadh

只有这个解决方案对我有效。 - undefined

Answer 3

使用不同的嵌套引号将字符串传递给gotoBlog函数。在此示例中，我在双引号内使用单引号。

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick="gotoBlog( '#{val.link}' )")

换句话说：

button( onclick= "myFunction('#{stringVariable}')" )

- furt furt

Answer 4

您只需要在onclick中加入"myfunction(#{varible.atributo})"即可。

以下是一个示例：

table
thead
    tr
        th #ID
        th Description
        th Actions
tbody
    each item, i in itemlist
        tr
            th(scope='row') #{item.id}
            td #{item.description}
            td
                button(onclick="editItem(#{item.id})", title="Edit")
                    |  Edit

- Oscar Luza

Answer 5

虽然有点晚，但是上面的大多数选项对我都没有用，但这个有效。

button(onclick='gotoBlog('+'"'+val.link+'"'+')')

或者更简单：

onclick=`gotoBlog('${val.link}')`

基本上将val.link转换为字符串。

- mocha

---

我也发现上面的答案对我没有用，而你的有用，谢谢。 - user2153050

这就是它... - Ray Hulha

Answer 6

太晚了，我知道 :(

但这可能会有用！

（注：无需翻译的英文部分已自动忽略）

`${}`

因此，代码将为：

button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick=`gotoBlog( ${val.link} )`)

- LSafer

Answer 7

文本

这对我来说很有效，可以在onClick函数中使用我传递给pug的值。

- Max Tromp

Answer 8

在函数中使用多个参数时，可以使用以下方法：

'myFunction(' + '"' + varA + '"' + ',' + '"' + varB + '"' + ')'

注意：外部/内部/全部引号可以是单引号'或双引号"，我使用单引号和双引号以提高可读性。

- kilogic

Answer 9

我遇到了类似的问题，并以不同的方式解决了它（通过转义参数）。 在我的情况下，当单击按钮时，我需要将以下模板值作为参数传递给JavaScript函数

{
  url:"http://google.com",
  token: "Bearer your-token", 
  accountId: "abc123"
}

所以在我的情况下，pug 看起来如下。

button(onclick='authenticate(\'' + url + '\',\'' + token + '\',\'' + accountId + '\')') Login

而生成的HTML如下所示

<button onclick="authenticate('http://google.com','Bearer your-token','abc123')">Login</button>

- Raf