Vuejs - filterBy - orderBy - CustomFilter

https://codepen.io/thanhmabo/pen/WQwqoq

by Megi93

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js"></script>
<div id="demo">
    <input type="text" class="form-control" v-model="search" />
    <br/>
    <label>
        <input type="radio" value="all" v-model="gender" checked> All</label>
    <label>
        <input type="radio" value="male" v-model="gender"> Male</label>
    <label>
        <input type="radio" value="female" v-model="gender"> Female</label>
    <br/>
    <table class="table">
        <thead>
            <tr>
                <th v-repeat="column: columns">
                    <a v-class="active: sortKey==column" v-on="click: sortBy(column)">
              {{ column | capitalize }}
            </a>
                </th>
            </tr>
        </thead>
        <tr v-repeat="people | gender |filterBy search |orderBy sortKey reverse">
            <td>{{ name }}</td>
            <td>{{ gender }}</td>
            <td>{{ age }}</td>
        </tr>
    </table>
</div>

CSS

body {
    margin: 30px;
}

a.active {
    color: #000;
}

JavaScript

var demo = new Vue({
    el: '#demo',
    data: {
      sortKey: '',
        reverse: false,
        search: '',
        columns: ['name', 'gender', 'age'],
        gender: 'all',
        people: [
          {name: 'Tí', age: 30,gender:'male'},
          {name: 'Can', age: 20,gender:'female'},
          {name: 'Nga', age: 12,gender:'female'},
          {name: 'Đô', age: 67,gender:'male'},
          {name: 'Linh', age: 15,gender:'female'},
          {name: 'Ban', age: 12,gender:'male'}
        ]
    },
    methods: {
      sortBy: function(sortKey){
          this.reverse = this.sortKey==sortKey? !this.reverse : false
          this.sortKey = sortKey
      }
    },
    filters:{
      gender: function(people){  
        if(this.gender=='all') return people
        return people.filter(function(person){
          return person.gender == this.gender
        }.bind(this))
      }
    }
})