Sorting a Table with Vue + pug

index.pug

#demo.container
  input(v-model="search" placeholder="Filter users by name or age").form-control
  table.table.table-striped
    thead
      tr
        th(v-repeat="column: columns")
          a(href="#" v-on="click: sortBy(column)" v-class="active: sortKey == column") {{ column | capitalize }}
    tbody
      tr(v-repeat="users | filterBy search | orderBy sortKey reverse")
        td {{ name }}
        td {{ age }}
  .form-group
    label Name
    input(type="text" v-model="newUser.name").form-control
  .form-group
    label Age
    input(type="name" v-model="newUser.age").form-control
  button(type="submit" v-on="click: addUser()").btn.btn-primary Add

script.js

new Vue({
  el: '#demo',
  data: {
    sortKey: 'name',
    reverse: false,
    search: '',
    columns: ['name', 'age'],
    newUser: {},
    users: [
      { name: 'John', age: 50 },
      { name: 'Jane', age: 22 },
      { name: 'Paul', age: 34 },
      { name: 'Kate', age: 15 },
      { name: 'Amanda', age: 65 },
      { name: 'Steve', age: 38 },
      { name: 'Keith', age: 21 },
      { name: 'Don', age: 50 },
      { name: 'Susan', age: 21 }
    ]
  },

  methods: {
    sortBy: function(sortKey) {
      this.reverse = (this.sortKey == sortKey) ? ! this.reverse : false;
      this.sortKey = sortKey;
    },

    addUser: function() {
      this.users.push(this.newUser);
      this.newUser = {};
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>

sorting-a-table-with-vue-pug.markdown

Sorting a Table with Vue + pug

http://stackoverflow.com/a/33029414/3781701

An extended version of Jeffrey's example. https://laracasts.com/series/learning-vuejs/episodes/6

A Pen by Yoan Marchal on CodePen.

License.

style.css

body {
  margin: 2em 0;
}

a {
  font-weight: normal;
  color: blue;
}

a.active {
  font-weight: bold;
  color: black;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />