如何将值传递给（Jade）pug 中的 onclick 函数？

Question

I am new to jade and stuck on this issue. I think I have tried everything from the StackOverflow posts and still at nothing.

The things I have tried

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

Error

1:8 Uncaught SyntaxError: Invalid or unexpected token

Changing it to !{val.link}

Error

Uncaught SyntaxError: Unexpected token .

Changing it to "!{val.link}" and "#{val.link}" just gives me string understandably so. BTW val.link is a string

Just giving val.link says Uncaught ReferenceError: val is not defined

I am out of options now. Help will be appreciated.

Thanks

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

You just need to put onclick="myfunction(#{varible.atributo})"

Here a example:

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

Use differing nested quotation marks so that you pass a string to your gotoBlog function. Here, I use single ticks within double ticks.

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

In other words:

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

Answer 5

Too late, I know :(

But, this could be useful!

`${}`

So the code will be

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

Answer 6

I came across a similar issues and solved it rather differently (by escaping params). In my case, I needed to pass the following template values to a javascript function as argument when a button is clicked

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

So the pug in my case looked as follow

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

And the resulting html is as follow

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

Answer 7

When using multiple parameters in a function, this did the trick:

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

NOTE: outer/inner/all quote marks can be ' (single) or " (double) quote marks, I used single and double quote marks for readability.

Answer 8

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

This worked for me to use values that I passed to pug inside an onClick function.

Answer 9

Too late but most of the options above didn't work for me but this did

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

or simpler:

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

Basically converts val.link to a string.