如果我有以下代码:
<template v-for="(item, index) in items" v-if="item.name === 'foo'">
<p>{{ item.name }}</p>
</template>
如果此循环不输出任何内容,我将如何打印消息?
谢谢!
答案 0 :(得分:4)
我使用computed属性来创建过滤后的列表。然后,您可以根据列表长度使用v-if
。例如
computed: {
fooItems () {
return this.items.filter(({name}) => name === 'foo')
}
}
并在您的模板中
<template v-for="(item, index) in fooItems">
<p>{{ item.name }}</p>
</template>
<p v-if="fooItems.length === 0">
Nothing to show
</p>