Deleting items.

src/components/ListItem.vue

@@ -10,9 +10,9 @@
         <input class="input" type="text" v-bind:disabled="element.checked" v-model="element.content"
                v-on:blur="updateItem(element)">
       </div>
-      <div class="control" v-if="!element.checked">
-        <a class="button is-primary" v-on:click="updateItem(element)">
-          Save
+      <div class="control">
+        <a class="button is-danger" v-on:click="deleteElement(element)">
+          <ion-icon name="trash"></ion-icon>
         </a>
       </div>
     </div>
@@ -31,6 +31,9 @@ export default {
   methods: {
     updateItem: function () {
       this.$emit('updateItem', {id: this.element.id, checked: this.element.checked}, true)
+    },
+    deleteElement: function () {
+      this.$emit('deleteElement', this.element.id)
     }
   }
 }

src/views/List.vue

@@ -31,11 +31,11 @@
           @change="onChange"
           item-key="id" v-if="searchQ.length <= 0">
         <template #item="{element}">
-          <ListItem v-bind:item="element" v-bind:can-move="!element.checked" v-on:updateItem="updateItem"></ListItem>
+          <ListItem v-bind:item="element" v-bind:can-move="!element.checked" v-on:updateItem="updateItem" v-on:deleteElement="deleteElement"></ListItem>
         </template>
       </draggable>
       <div v-if="searchQ.length > 0">
-        <ListItem v-for="element in searchResults" v-bind:can-move="false" :key="element.id" v-bind:item="element" v-on:updateItem="updateItem"></ListItem>
+        <ListItem v-for="element in searchResults" v-bind:can-move="false" :key="element.id" v-bind:item="element" v-on:updateItem="updateItem" v-on:deleteElement="deleteElement"></ListItem>
       </div>
 
     </div>
@@ -100,6 +100,18 @@ export default {
         item.loading = false;
       })
     },
+    deleteElement: function (itemId) {
+      fetch(`${process.env.VUE_APP_API_BASE_URL}/api/lists/` + this.listId + `/items/` + itemId, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json;charset=utf-8',
+          'X-API-KEY': localStorage.getItem('KEY')
+        }
+      }).finally(() => {
+        this.initialItems = this.initialItems.filter(i => i.id !== itemId)
+        this.recopyItemsObject();
+      })
+    },
     recopyItemsObject: function () {
       this.searchResults = this.initialItems.map(x => ({...x}));
     },