在 Vue 中，我必须过滤一些数据：

<input v-model="search">
<ul>
    <li v-repeat="photo in photos | filterBy search in 'name'">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>

如何检测空过滤器结果并向用户显示适当的消息？

EDIT

我目前正在执行以下操作，我认为这是一个棘手的解决方法：

HTML:

<input v-model="search">
<ul>
    <li v-repeat="photo in photos">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>

JavaScript：

var v = new Vue({
    data: {
        allPhotos: [...],
        photos: [],
        search: '',
    },
    ready: function () {
        var filter = Vue.filter('filterBy');
        var self = this;
        this.$watch('search', function () {
            self.photos = filter(self.allPhotos, self.search, 'name');
        }, {
            immediate: true
        });
    }
})

Vue 2.x（更新）

在 Vue 2.x 中，现在只能使用过滤器，正如文档所说 http://vuejs.org/guide/syntax.html#Filters，内部文本插值：

Vue 2.x 过滤器只能在 Mustache 绑定内部使用。要在指令绑定内实现相同的行为，您应该使用计算属性。

您可以使用内置 JavaScript 实现相同的行为filter方法和计算属性。

<input v-model="searchQuery">

<span v-if="!filteredItems.length">No results.</span>

<ul>
    <li v-for="item in filteredItems"></li>
</ul>

computed: {
  filteredItems: function () {
    var self = this;
    return self.items.filter(function (item) {
      return item.indexOf(self.searchQuery) !== -1;
    })
  }
}

Vue 1.x（原始答案）

目前有两种方法。在所有情况下，模板看起来都一样。

<input v-model="searchQuery">

<span v-if="!filteredItems.length">No results.</span>

<ul>
    <li v-for="item in filteredItems"></li>
</ul>

filterBy

原来的filterBy方法通过访问$options.

computed: {
    filteredItems: function () {
        return this.$options.filters.filterBy(this.items, this.searchQuery);
    }
}

$eval

更干净一点的方法。 Eval 表达式就像您在模板中所做的那样。

computed: {
  filteredItems: function () {
    return this.$eval('items | filterBy searchQuery');
  }
}