Question

https://jsfiddle.net/72tnpa0o/

<div id="filter-by-example">
  <label>Cool</label><input type="checkbox" v-model="cool">
  <label>notCool</label><input type="checkbox" v-model="notCool">
  <ul>
    <li v-for="user in users | filterBy cool in 'cool' | filterBy notCool in 'notCool'">
      {{ user.name }}
    </li>
  </ul>
</div>`



new Vue({
  el: '#filter-by-example',
  data: {
    name: '',
    users: [
      { 
        name: 'Bruce',
        cool: true,
        notCool: false
      },
      { 
        name: 'Chuck',
        cool: false,
                notCool: true
      },
      { 
        name: 'Jackie',
        cool: true,
        notCool: false
      }
    ]
  }
})

我在上面的小提琴链接中有一个例子。我可以通过输入复选框进行排序，但取消选中过滤器不会重置为原始结果。

在取消选中过滤器按钮以获取完整数组后，是否有人知道如何渲染？

Answer 1

这里的主要问题是选择器的逻辑是错误的：现在，如果取消选中这两个复选框，您将获得cool和notCool的项目。它在开始时工作的原因是因为代码中存在错误（打开控制台，您会看到错误）：cool和notCool在开头都是undefined。< / p>

首先，您需要概述您想要的内容。一旦你完成了这个，你可以使用一个函数来过滤而不是使用开箱即用的函数，如下所示：

<li v-for="user in users | filterBy filterCool">
  {{ user.name }}
</li>

filterCool应该是这样的：

filterCool: function (element, i, list) {
  if (this.showCool && element.cool) return true;
  if (this.showNotCool && element.notCool) return true;
  if (!this.showNotCool && !this.showCool) return true;
  return false;
}

现在不是一个完美的解决方案，但是一个好的开始方式。检查一下：https://jsfiddle.net/72tnpa0o/5/

Answer 2

如果：false-value复选框为空

，则过滤器不适用

尝试更改此内容：

<input type="checkbox" v-model="cool">
<input type="checkbox" v-model="notCool">

通过

<input type="checkbox" :false-value="" v-model="cool">
<input type="checkbox" :false-value="" v-model="notCool">

Answer 3

另外，请务必为列表项添加一个键，以便vue可以跟踪每个项目并显示相关数据（https://vuejs.org/v2/guide/list.html#key）。

Vue 2：

<li 
  v-for="(user, key) in users | filterBy filterCool" 
  :key="key"
>
 {{ user.name }}
</li>

Vue 1：

<li 
  v-for="user in users | filterBy filterCool" 
  track-by="$index"
>
 {{ user.name }}
</li>

Vue.js - 重置filterBy结果

3 个答案: