finished editable list

components/AbgabeItem.vue

@@ -3,7 +3,7 @@
         :selected="selected"
     >
         <div class="flex flex-row w-full">
-            <div v-if="!inEdit" class="w-full select-none text-left mr-1">
+            <div class="w-full select-none text-left mr-1">
                 {{ title }}
             </div>
             <button

components/KolloquiumItem.vue

@@ -12,13 +12,16 @@
                 class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-blue-500 hover:bg-blue-700 active:bg-blue-900 pb-1">&#9993;</button>
             <button
                 v-if="inEdit"
-                @click.native="save()"
+                @click="save()"
                 class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-green-500 hover:bg-green-700 active:bg-green-900">✓</button>
             <button
                 v-if="!inEdit"
+                @click="edit()"
                 class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-yellow-500 hover:bg-yellow-700 active:bg-yellow-900">✎</button>
             <button
-                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900">╳</button>
+                class="text-center text-white rounded-md select-none w-9 h-8 ml-1 bg-red-500 hover:bg-red-700 active:bg-red-900"
+                @click="deleteMe()"
+            >╳</button>
         </div>
     </ListItem>
 </template>
@@ -48,7 +51,14 @@ export default {
     },
     methods: {
         save() {
-            console.log("save me!")
+            this.$emit("update:inEdit", false);
+            this.$emit("update:title", this.title);
+        },
+        edit() {
+            this.$emit("update:inEdit", true);
+        },
+        deleteMe() {
+            this.$emit("deleteKolloquium")
         }
     }
 }

pages/index.vue

 <template>
-    <div
-        class="relative flex flex-col items-center justify-top min-h-screen bg-gray-100 sm:items-top sm:pt-0"
-    >
+    <div class="relative flex flex-col items-center justify-top min-h-screen bg-gray-100 sm:items-top sm:pt-0">
         <box>
             <template slot="title">
                 KolloquiumVR Control Panel
@@ -21,7 +19,10 @@
                     @click.native="selectKolloquium(kolloquium)"
                     :selected="selectedKolloquium===kolloquium.title"
                     :title="kolloquium.title"
+                    @update:title="kolloquium.title=$event"
                     :inEdit="kolloquium.inEdit"
+                    @update:inEdit="toggleEdit(kolloquium, $event)"
+                    @deleteKolloquium="deleteKolloquium(kolloquium)"
                 />
                 <ListItem
                     @click.native="createNewKolloquium()"
@@ -45,7 +46,6 @@
                 <button class="border rounded mt-4 p-2 font-semibold text-white bg-green-500 hover:bg-green-600 focus:bg-green-700">Aktivieren</button>
             </template>
         </box>
-        {{ kolloquiums }}
     </div>
 </template>
 
@@ -105,6 +105,15 @@ export default {
             this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title.length > 0);
             this.kolloquiums = [...this.kolloquiums, {title: '', inEdit: true}];
 
+        },
+        toggleEdit(kolloquium, status) {
+            this.kolloquiums.forEach(kolloquium => {
+                kolloquium.inEdit = false;
+            });
+            kolloquium.inEdit = status;
+        },
+        deleteKolloquium(kolloquiumToDelete) {
+            this.kolloquiums = this.kolloquiums.filter(kolloquium => kolloquium.title != kolloquiumToDelete.title);
         }
     }
 }