Vue.js为空过滤结果

Question

在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>

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

编辑

我目前正在做以下工作,我觉得这是一个hacky解决方法:

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
        });
    }
})

Answer 1

Vue 2.x(更新)

在Vue 2.x过滤器中,现在只能在文档插值中使用文档插值:

Vue 2.x过滤器只能在胡子绑定中使用.要在指令绑定中实现相同的行为,您应该使用Computed属性.

您可以使用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方法通过访问$options.

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

$ EVAL

一点点清洁的方法.Eval表达式就像您在模板中所做的那样.

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

Answer 2

在HTML中:

<input v-model="search">
<h4 v-if="!filteredPhotos.length">No results</h4>
<ul>
    <li v-for="photo in filteredPhotos">
        <img :src="photo.src" :alt="photo.name">
    </li>
</ul>

在JS中,您需要使用如下计算属性:

computed: {
  filteredPhotos: function () {
      return this.photos.filter(function(photo){
          return photo.name.indexOf(this.search) > -1;
      }.bind(this));
  }
}

演示:http://jsfiddle.net/crswll/Lr9r2kfv/37/