Vue.js空筛选结果

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

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

演示：

Vue 2.x（更新） 在Vue 2.x中，过滤器现在只能在文本插值中使用：

Vue 2.x筛选器只能在Mustach绑定中使用。要在指令绑定中实现相同的行为，应改用计算属性

您可以使用JavaScript内置的

filter

方法和computed属性实现相同的行为

没有结果。

计算：{
filteredItems:函数（）{
var self=这个；
返回self.items.filter（函数（项）{
返回item.indexOf（self.searchQuery）！=-1；
})
}
}

---

Vue 1.x（原始答案） 目前有两种方法。在所有情况下，模板可以看起来相同

没有结果。

肮脏的 通过

$options

访问的原始

过滤器by

方法

计算：{
filteredItems:函数（）{
返回此.options.filters.filterBy（this.items，this.searchQuery）；
}
}

$eval 更干净一点的方法。像在模板中一样计算表达式

计算：{
filteredItems:函数（）{
返回此值。$eval（'items | filterBy searchQuery'）；
}
}

这只适用于Vue 1.0，即使这样，您也应该只使用计算属性。我将把这个答案留在这里以防万一。

---

您也可以使用和计算属性来执行此操作

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

使用类似

<div v-if="filteredItems.length">
  <div v-for="item in filteredItems">
    {{ item.name }}
  </div>
</div>
<div v-else>
  No results found!
</div>

{{item.name}
没有找到结果！

HTML/CSS解决方案（以防万一，如果您在两年后仍试图修复它）

/*所有列表项都可见*/
ul.that-list li{display:block；}
/*…除了最后一个*/
ul.that-list li:last child{display:none；}
/*但如果最后一个也是第一个。。。意思是唯一的一个*/
ul.that-list li:first child{display:block；}

包含项目的列表

1-物品在这里
2-这里还有一个
3-那一个呢
（！message）没有任何项目。。。对不起

空的

（！message）没有任何项目。。。对不起

谢谢你，你挽救了这一天！顺便说一句，我确实使用

v-attr

来设置动态属性，但为了演示，我想把重点放在我遇到的问题上！过了一会儿，再次访问这个问题。这绝对是正确的方法，尤其是在Vue 2.0推出的情况下。最近有没有将此方法添加到Vue.js中？我知道Vue.js最近有很多更改，而这个选项当时似乎不可用！我接受你的答案，因为它与“现在”更相关，不过，干得好！你可以使用它来保持它的整洁，并像

一样返回这个。$eval（'items | searchQuery'）

并且它还可以让你清晰地链接更多的过滤器。这是很有可能的。版本>1.0有很多更改。如何指定要使用的项属性？此答案在Vue 2.0中不再有效。我相信杜威·瓦斯帕达下面的答案是最好的（也是唯一一个仍然适用于2.0的答案）。

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

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

<div v-if="filteredItems.length">
  <div v-for="item in filteredItems">
    {{ item.name }}
  </div>
</div>
<div v-else>
  No results found!
</div>