我正在尝试编写一个显示图标 AAA 或图标 BBB 的模板,具体取决于当前迭代中的项目是否具有特定标志。这是我的代码:
<div v-for="(item, itemIndex) in items">
<div v-if="item.hasUnreadComments">
<span>Display Icon AAA</span>
</div>
<div v-else>
<span>Display Icon BBB</span>
</div>
</div>
这里的问题是我需要任一图标显示一次。如果多个项目将其设置为 item.hasUnreadComments === true
,图标 AAA 将显示相同的次数,这不是我想要的。在文档中找不到任何内容,我不想将其绑定(bind)到 v-model。
如果没有第三个数据变量用作标志,这可以在 Vue 中完成吗?
最佳答案
您将必须进行某种中间转换。 v-if
只是一个灵活的低级指令,它将根据条件隐藏或显示元素。它无法直接处理您期望的数据输出方式。
如果我理解您的要求,您希望图标仅在列表中可见一次。您可以预过滤并使用额外的“else”条件。这听起来像是计算属性的用例。您定义一个函数,可以在需要时提供数据的转换版本。
可以通过找到一种方法来简化嵌套的 if/else
来改进此示例,但我认为这现在涵盖了您的用例:
const app = new Vue({
el: "#app",
data() {
return {
items: [{
hasUnreadComments: true
},
{
hasUnreadComments: true
},
{
hasUnreadComments: false
},
{
hasUnreadComments: true
},
{
hasUnreadComments: false
},
]
}
},
computed: {
filteredItems() {
let firstIconSeen = false;
let secondIconSeen = false;
return this.items.map(item => {
if (item.hasUnreadComments) {
if (!firstIconSeen) {
item.firstA = true;
firstIconSeen = true;
}
} else {
if (!secondIconSeen) {
item.firstB = true;
secondIconSeen = true;
}
secondIconSeen = true;
}
return item;
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(item, itemIndex) in filteredItems">
<div v-if="item.firstA">
<span>Display Icon AAA</span>
</div>
<div v-else-if="item.firstB">
<span>Display Icon BBB</span>
</div>
<div v-else>
<span>Display no icon</span>
</div>
</div>
</div>
关于vue.js - 根据属性仅有条件地渲染图标一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55307203/