- Finished methods to delete and update a spell, reactive components

client/src/components/spells/spells-list.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="spell-list-wrapper">
         <div v-masonry transition-duration=".5s" item-selector=".spell-card" class="row spells-list">
-            <spell-card v-masonry-tile class="spell-card" v-for="(spell, index) in spells" :key="index" v-bind:spell="spell" @editSpell="editSpell"/>
+            <spell-card v-masonry-tile class="spell-card" v-for="(spell) in spells" :key="spell.id" v-bind:spell="spell" @editSpell="editSpell" @deleteSpell="deleteSpell"/>
         </div>
-        <edit-spell-card v-if="Object.keys(active_spell).length > 0" v-bind:spell="active_spell" @editSpell="editSpell"/>
+        <edit-spell-card v-if="Object.keys(active_spell).length > 0" v-bind:spell="active_spell" @updateSpell="updateSpell"/>
     </div>
 </template>
 
@@ -43,8 +43,17 @@ export default {
             this.loading = false
             this.spells = displaySpells
         },
-        async editSpell(e) {
+        editSpell(e) {
             this.active_spell = e;
+        },
+        updateSpell(e) {
+            let oldSpell = this.spells.find(x => x.id === e.id)
+            this.spells.splice(this.spells.indexOf(oldSpell), 1, e)
+            this.active_spell = {}
+        },
+        deleteSpell(e) {
+            this.spells.splice(this.spells.indexOf(e), 1)
+            this.active_spell = {}
         }
     }
 }