diff --git a/src/components/MealCard.vue b/src/components/MealCard.vue
index 980a7f6..d7927c5 100644
--- a/src/components/MealCard.vue
+++ b/src/components/MealCard.vue
@@ -27,14 +27,14 @@
 
         <p>
             Cooked by 
-            <span v-for="chef in meal.chefs" :key="chef.id">
+            <span v-for="(chef, index) in meal.chefs" :key="chef.id">
                 {{ chef.name }}{{ seperator(index, meal.chefs) }}
             </span>
             <span v-if="!meal.chefs.length">somebody?</span>
         </p>
         <p> 
             For 
-            <span v-for="consumer in meal.consumers" :key="consumer.id">
+            <span v-for="(consumer, index) in meal.consumers" :key="consumer.id">
                 {{ consumer.name }}{{ seperator(index, meal.consumers) }}
             </span>
             <span v-if="!meal.consumers.length">somebody?</span>
diff --git a/src/data.js b/src/data.js
index dc55599..1f97d9c 100644
--- a/src/data.js
+++ b/src/data.js
@@ -67,6 +67,18 @@ export default {
         return await response.json();
     },
     async saveMeal(meal) {
+        if (meal.id) {
+            const response = await fetch(BASE_URL + `/meals/${encodeURIComponent(meal.id)}`, {
+                method: "PUT",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(meal),
+            });
+            return await response.json();
+        }
+        
         const response = await fetch(BASE_URL + "/meals", {
             method: "POST",
             credentials: "include",