Vue.js:检查使用v-if条件的v-for循环是否呈现了任何项？

如果我有以下代码：

<template v-for="(item, index) in items" v-if="item.name === 'foo'">
   <p>{{ item.name }}</p>
</template>

{{item.name}

如果此循环没有输出任何内容，我将如何打印消息

---

谢谢

我将使用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>

{{item.name}


没什么可展示的

use应该能够满足您的要求。我的意思是，您可以对另一个元素执行v-if检查items是否为null或items.length==0