WIP commented out sorting code

src/components/Spelllist.vue

@@ -1,17 +1,6 @@
 <template>
   <table class="spell-list q-table compact striped-odd">
     <thead>
-      <tr>
-        <th class="text-left">
-          <big>Name</big>
-        </th>
-        <th class="text-left">
-          <big>School</big>
-        </th>
-        <th class="text-right">
-          <big>Level</big>
-        </th>
-      </tr>
       <tr>
         <td colspan="3">
           <q-pagination
@@ -20,6 +9,23 @@
           ></q-pagination>
         </td>
       </tr>
+      <tr>
+        <th class="text-left">
+          <a
+            v-on:click="sortBy = 'name'"
+          >Name</a>
+        </th>
+        <th class="text-left">
+          <a
+            v-on:click="sortBy = 'school'"
+          >School</a>
+        </th>
+        <th class="text-right">
+          <a
+            v-on:click="sortBy = 'level'"
+          >Level</a>
+        </th>
+      </tr>
     </thead>
     <tbody>
       <tr
@@ -44,6 +50,7 @@
 
 <script>
 import Vue from 'vue'
+// import Query from '../query'
 import SpellItem from './Spellitem'
 
 Vue.component('spell-item', SpellItem)
@@ -57,7 +64,13 @@ export default {
     pagedSpells () {
       let min = this.page * this.perPage - this.perPage
       let max = min + this.perPage
-      return this.spells.slice(min, max)
+      return this.sortedSpells.slice(min, max)
+    },
+    sortedSpells () {
+      return this.spells
+      // return new Query(this.spells)
+      // .sort(this.sortBy)
+      // .results
     }
   },
   watch: {
@@ -73,7 +86,8 @@ export default {
   data () {
     return {
       perPage: 10,
-      page: 1
+      page: 1,
+      sortBy: 'name'
     }
   }
 }
@@ -82,4 +96,7 @@ export default {
 <style scoped lang="stylus">
   .spell-list
     width: 100%
+  th a
+    padding: 1em
+    display: block
 </style>

src/query.js

@@ -23,6 +23,7 @@ export default class Query {
   }
 
   sort (key = 'sortScore') {
+    debugger
     this.data = this.data.sort((a, b) => {
       if (a[key] < b[key]) return -1
       if (a[key] > b[key]) return 1