[Vuejs]-Vue.js – Resetting the filterBy results

The filter does not apply if the :false-value checkbox is empty

Try change this:

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

by

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

The main issue here is that the logic of the selector is wrong: as it stands now, if you deselect both checkboxes, you will get the items that are both cool and notCool. The reason it’s working in the beginning is because there’s an error in your code (open the console, you will see errors there): both cool and notCool are undefined at the beginning.

So first you need to outline what do you want. Once you’ve done this, you can use a function to filter instead of using the out-of-the-box one, something like this:

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

And filterCool should be like:

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

Not a perfect solution right now, but a good way to start. Check this: https://jsfiddle.net/72tnpa0o/5/

Also make sure to add an key for your list items so that vue can track each item and show relevant data (https://v2.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>