Checkboxes add to stateful chosen list

src/components/Index.vue

@@ -13,7 +13,6 @@
 
     <div class="layout-view">
       <spell-list
-        v-if="state.spells.data.length"
         :spells="state.spells.data"
         :search="search"
       ></spell-list>
@@ -58,7 +57,7 @@ export default {
     }
   },
   mounted () {
-    if (this.state.spells.loaded === false) {
+    if (!this.state.spells.loaded) {
       Loading.show()
 
       fetch('./statics/dnd5e.json')

src/components/Spellitem.vue

@@ -12,12 +12,17 @@
       </div>
     </div>
     <div class="item-secondary">
-      <q-checkbox v-model="checked" disable></q-checkbox>
+      <q-checkbox
+        v-model="checked"
+        @input="toggle"
+      ></q-checkbox>
     </div>
   </div>
 </template>
 
 <script>
+import { state, dispatch } from '../store'
+
 let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
 
 export default {
@@ -43,6 +48,16 @@ export default {
   methods: {
     openSpell (event) {
       console.log(this.spell.name)
+    },
+    toggle (want) {
+      dispatch({
+        type: 'CHANGE_CHOSEN',
+        data: {
+          want,
+          name: this.spell.name
+        }
+      })
+      console.log(state.chosen)
     }
   }
 }

src/components/Spelllist.vue

@@ -37,7 +37,6 @@ export default {
       return this.search.length >= 3 ? 'sortScore' : this.sortBy
     },
     pagedSpells () {
-      debugger
       return new Query(this.filteredSpells)
       .paginate(1, this.loadedPage * 20)
       .results

src/store.js

@@ -2,7 +2,8 @@ export let state = {
   spells: {
     loaded: false,
     data: []
-  }
+  },
+  chosen: []
 }
 
 export function dispatch (action) {
@@ -10,6 +11,15 @@ export function dispatch (action) {
     case 'SPELLS_RESOLVED':
       state.spells = action.data
       break
+    case 'CHANGE_CHOSEN':
+      if (action.data.want) {
+        state.chosen.push(action.data.name)
+      }
+      else {
+        let index = state.chosen.indexOf(action.data.name)
+        if (index >= 0) state.chosen.splice(index, 1)
+      }
+      break
   }
 }