你不应该有具有多个属性的pug标签

Question

具有计算CSS类名

的Pug mixin

我的哈巴狗mixin tweet通常只生成这个HTML：

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

我传递tweet参数index，这是一个从零开始的正数。当index等于tweetData.index（在别处定义）时，我希望生成的div发光，如下所示：

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

这是我的尝试：

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

错误消息为：You should not have pug tags with multiple attributes.

Answer 1

问题是你尝试两次定义属性，尝试这样做它应该有效：

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

虽然它只是一个偏好，但您不需要使用div，因为默认情况下，当您省略它时，pug会使用div作为元素。此外，您可以通过使用&&逻辑运算符来最小化条件行：

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