如何將值傳遞給（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 轉換為字符串。