You should not have pug tags with multiple attributes

Question

Pug mixin with computed CSS class name

My pug mixin tweet normally just generates this HTML:

<div class='col-md-3'></div>

I pass tweet the parameter index, which is a zero-based positive number. When index equals tweetData.index (defined elsewhere) I want the generated div to glow, like this:

<div class='blueGlow col-md-3'></div>

This is my attempt:

mixin tweet(index)
    div.collapse(class= tweetData.index === index ? "blueGlow" : undefined).col-md-3(data-index=index)

The error message is: You should not have pug tags with multiple attributes.

Storytelling

You can try it like this: div.collapse.col-md-3(class=(tweetData.index === index ? "blueGlow" : undefined), data-index=index) – Lesko

That works. If you put that in an answer I will accept it. – Storytelling

Answer 1

The problem is you're trying to define attributes twice, try it like this and it should work:

div.collapse.col-md-3(class=(tweetData.index === index ? "blueGlow" : undefined), data-index=index)

Although it's just a preference, you don't need to use a div since by default pug uses a div as an element when you omit it. Also, you can minimize your conditional line by making use of the && logical operator:

.collapse.col-md-3(class=(tweetData.index === index && "blueGlow"), data-index=index)

Lesko