如何将值传递给（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 说Uncaught ReferenceError: val is not defined

我现在别无选择。 帮助将不胜感激。

谢谢

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 + ')')

Answer 2

我只是使用了下面的代码，它对我有用（带有 pre 和 pos 引号）

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

Answer 3

你只需要把 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

Answer 4

使用不同的嵌套引号，以便将字符串传递给 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}')" )

Answer 5

太晚了，我知道:(

但是，这可能很有用！

`${}`

所以代码将是

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

Answer 6

我遇到了类似的问题，并以不同的方式解决了它（通过转义参数）。 就我而言，当单击按钮时，我需要将以下template values作为参数传递给 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>

Answer 7

在一个函数中使用多个参数时，这样做的技巧：

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

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

Answer 8

button(type='button', onClick='function(\\'' + someValue + '\\')') 文本

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

Answer 9

为时已晚，但上面的大多数选项对我都不起作用，但确实如此

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

或更简单：

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

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