你不应该有具有多个属性的哈巴狗标签 [英] You should not have pug tags with multiple attributes

问题描述

Pug mixin 与计算出的 CSS 类名

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

我通过 tweet 参数 index，这是一个从零开始的正数.当 index 等于 tweetData.index(在别处定义)时，我希望生成的 div 发光，如下所示:

这是我的尝试:

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

错误信息是:你不应该有具有多个属性的 pug 标签.

解决方案

问题是你试图定义属性两次，像这样尝试它应该可以工作:

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)

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.

解决方案

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)

这篇关于你不应该有具有多个属性的哈巴狗标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！