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

时间:2018-01-30 23:44:15

标签: vue.js

如果我有以下代码:

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

如果此循环不输出任何内容,我将如何打印消息?

谢谢!

1 个答案:

答案 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>