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.
#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 |
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 = {}; | |
} | |
} | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> |
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.
body { | |
margin: 2em 0; | |
} | |
a { | |
font-weight: normal; | |
color: blue; | |
} | |
a.active { | |
font-weight: bold; | |
color: black; | |
} |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |