grid.js 855 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. // register the grid component
  2. Vue.component('demo-grid', {
  3. template: '#grid-template',
  4. replace: true,
  5. props: ['data', 'columns', 'filter-key'],
  6. data: function () {
  7. var reversed = {}
  8. this.columns.forEach(function (key) {
  9. reversed[key] = false
  10. })
  11. return {
  12. data: null,
  13. columns: null,
  14. sortKey: '',
  15. filterKey: '',
  16. reversed: reversed
  17. }
  18. },
  19. methods: {
  20. sortBy: function (key) {
  21. this.sortKey = key
  22. this.reversed[key] = !this.reversed[key]
  23. }
  24. }
  25. })
  26. // bootstrap the demo
  27. var demo = new Vue({
  28. el: '#demo',
  29. data: {
  30. searchQuery: '',
  31. gridColumns: ['name', 'power'],
  32. gridData: [
  33. { name: 'Chuck Norris', power: Infinity },
  34. { name: 'Bruce Lee', power: 9000 },
  35. { name: 'Jacky Chang', power: 7000 },
  36. { name: 'Jet Li', power: 8000 }
  37. ]
  38. }
  39. })