Crude implementation of multiple deletes

src/components/ImageItem.vue

 <template>
-  <div>
-    <a :href="`/${hash}`">
+  <div
+    @mouseover="hovered = true"
+    @mouseleave="hovered = checked ? true : false"
+    @click.ctrl="
+      checked = !checked;
+      $emit('checked', checked, hash);
+    "
+    id="image-container"
+  >
+    <div
+      @click="
+        checked = !checked;
+        $emit('checked', checked, hash);
+      "
+      :style="{ color: checked ? 'white' : 'black' }"
+      v-show="hovered"
+      id="checkmark"
+    >
+      X
+    </div>
+    <a @click.ctrl.prevent :href="`/${hash}`">
       <img :src="`/api/image/${hash}/file`" />
     </a>
   </div>
@@ -8,17 +27,36 @@
 
 <script>
 export default {
+  data: () => {
+    return {
+      hovered: false,
+      checked: false,
+    };
+  },
   props: {
     hash: {
       required: true,
     },
   },
+  methods: {},
 };
 </script>
 
 <style scoped>
+#image-container {
+  position: relative;
+}
 img {
   height: 100%;
   width: 100%;
 }
+#checkmark {
+  font-family: "Lucida Console", monospace;
+  font-weight: bold;
+  background: rgb(194, 184, 184);
+  position: absolute;
+  top: 0.4em;
+  left: 0.4em;
+  padding: 0.4em 0.4em;
+}
 </style>
\ No newline at end of file

src/components/ImageList.vue

 <template>
-  <div>
   <section id="list-container">
     <div id="item-container" v-for="(hash, index) in hashArray" :key="index">
-        <ImageItem :hash="hash"></ImageItem>
+      <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem>
     </div>
+    <button @click="deleteImages(deleteArray)">Delete</button>
   </section>
-  </div>
 </template>
 
 <script>
@@ -14,12 +13,30 @@ export default {
   components: {
     ImageItem,
   },
+  data: () => {
+    return {
+      deleteArray: [],
+    };
+  },
   props: {
     hashArray: {
       required: true,
     },
   },
-  methods: {},
+  methods: {
+    appendToDeleteArray(...args) {
+      const [checked, hash] = args;
+      checked
+        ? this.deleteArray.push(hash)
+        : this.deleteArray.splice(this.deleteArray.indexOf(hash), 1);
+    },
+    deleteImages(deleteArray) {
+      for (let i = 0; i < deleteArray.length; i++) {
+        fetch(`/api/image/${deleteArray[i]}`, { method: "DELETE" });
+      }
+      this.deleteArray = [];
+    },
+  },
 };
 </script>
 
@@ -29,6 +46,7 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  position: relative;
 }
 #item-container {
   max-width: 20%;
@@ -36,6 +54,11 @@ export default {
   flex-direction: column;
 }
 button {
-  position: absolute;
+  position: fixed;
+  bottom: 1em;
+  right: 1em;
+  padding: 1em 1em;
+  background: lightblue;
+  color: rgb(47, 42, 42);
 }
 </style>
\ No newline at end of file