Pagination > infinite scroll, page routing

src/components/Spellitem.vue

@@ -61,7 +61,7 @@ export default {
   ],
   methods: {
     openSpell (event) {
-      console.log(this.spell.name)
+      this.$router.push('/spell/' + this.spell.name)
     },
     toggle (want) {
       dispatch({

src/components/Spelllist.vue

@@ -1,21 +1,23 @@
 <template>
-  <section 
-    is="q-infinite-scroll"
-    :handler="loadMore"
-    class="spell-list list striped no-border"
-  >
+  <section class="spell-list list striped no-border" id="spell_list">
     <label
       is="spell-item"
       class="item two-lines item-link"
-      v-for="spell in filteredSpells"
+      v-for="spell in pagedSpells"
       :spell="spell"
     >
     </label>
+    <q-pagination
+      class="text-center"
+      v-model="state.page"
+      :max="numPages"
+    ></q-pagination>
   </section>
 </template>
 
 <script>
 import Vue from 'vue'
+import { Utils } from 'quasar'
 import Query from '../query'
 import SpellItem from './Spellitem'
 import { state } from '../store'
@@ -24,24 +26,43 @@ Vue.component('spell-item', SpellItem)
 
 export default {
   data () {
-    return { state }
+    return {
+      state,
+      perPage: 0
+    }
   },
   props: [
     'spells'
   ],
+  mounted () {
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.newPerPage)
+    })
+    this.calculateNewPage()
+  },
+  methods: {
+    newPerPage: Utils.debounce(function () {
+      this.calculateNewPage()
+    }, 100),
+    calculateNewPage () {
+      let fontSize = 14
+      this.perPage = Math.floor(window.innerHeight / (fontSize * 5)) - 4
+    }
+  },
   computed: {
+    numPages () {
+      return Math.ceil(this.filteredSpells.length / this.perPage)
+    },
     filteredSpells () {
       return new Query(this.spells)
       .search('name', this.state.search)
       .sort(this.state.sortBy)
-      .paginate(1, this.state.loadedPagination * 20)
       .results
-    }
-  },
-  methods: {
-    loadMore (index, done) {
-      this.state.loadedPagination += 1
-      done()
+    },
+    pagedSpells () {
+      return new Query(this.filteredSpells)
+      .paginate(this.state.page, this.perPage)
+      .results
     }
   }
 }

src/router.js

@@ -23,6 +23,7 @@ export default new VueRouter({
   routes: [
     { path: '/', component: load('Index') }, // Default
     { path: '/my', component: load('Myspells') },
+    { path: '/spell/:name', component: load('Spell') },
     { path: '*', component: load('Error404') } // Not found
   ]
 })

src/store.js

@@ -7,7 +7,7 @@ export let state = {
   search: '',
   sortBy: 'name',
   previousSortBy: 'name',
-  loadedPagination: 1
+  page: 1
 }
 
 export function dispatch (action) {