add delete items

src/components/ItemList.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import { groupItemsByUser } from '../store/shoppingList';
+import { useShoppingListStore } from '../store/shoppingList';
+
+const store = useShoppingListStore();
 
 defineProps({
   items: Array,
@@ -18,6 +21,7 @@ defineProps({
           <template v-slot:append>
             <v-btn icon="mdi-pencil" variant="text" :to="`/edit-item/${ item.id }`"/>
             <v-btn icon="mdi-check" variant="text" @click="item.isBought = !item.isBought"/>
+            <v-btn icon="mdi-delete" variant="text" @click="store.deleteItem(item.id)"/>
           </template>
         </v-list-item>
       </div>

src/store/shoppingList.ts

@@ -20,7 +20,11 @@ export const useShoppingListStore = defineStore('shoppingList', {
       users: users as Array<User>,
     };
   },
-  actions: {},
+  actions: {
+    deleteItem(id: number) {
+      this.items = this.items.filter(item => item.id !== id);
+    },
+  },
   getters: {
     openItems: state => state.items.filter(item => !item.isBought),
     boughtItems: state => state.items.filter(item => !!item.isBought),