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

I have an example up at the fiddle link above. I'm able to sort via the input checkboxes, but unchecking the filters doesn't reset to the original results.

Does anyone know how after unchecking a filter button to get the full array to render?

Answer 1

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/

Answer 2

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

Answer 3

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>