javascript - Vue.js - 重置filterBy结果

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

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

有谁知道取消选中过滤器按钮后如何获取完整的数组进行渲染？

Answer 1

这里的主要问题是选择器的逻辑是错误的:就目前而言，如果取消选择两个复选框，您将获得同时 cool 和 notCool< 的项目。它一开始工作的原因是你的代码中有一个错误(打开控制台，你会看到错误):cool 和 notCool 都是 undefined 在开头。

所以首先你需要概述你想要什么。完成此操作后，您可以使用函数进行过滤，而不是使用开箱即用的函数，如下所示:

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