Pug `#{}` fails to load variable inside `onclick`

Question

So I am using a javascript object to render a list of items. My object looks like this:

{
            text: 'One',
            url: 'index.pug'
        },
        {
            text: 'Two',
            url: 'Two.pug'
        },
        {
            text: 'Three',
            url: 'Three.pug'
        }
}

The interesting part is when pug renders them. I am rendering them using something like this:

div
    ul.horizontalScroll
        each item in params.apps
            li
                a(onclick="loadXMLDoc(#{item.url})") #{item.text}

What I cannot figure out is why item.text renders correctly, but on click the link doesn't ping the function. In chrome inspector, I saw this:<a onclick="loadXMLDoc(#)">One </a>. Why is the argument not coming through as index.pug like it should??

Answer 1

Try concatenating the variable within the attribute:

a(onclick="loadXMLDoc('" + item.url + "')") #{item.text}