问题
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.
回答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)
来源:https://stackoverflow.com/questions/48087962/you-should-not-have-pug-tags-with-multiple-attributes