From 49faac7aa0e293699c2cbd31dbeb69526767cc8c Mon Sep 17 00:00:00 2001
From: faezakamran <faezakamran@gmail.com>
Date: Wed, 30 Jan 2019 13:22:49 +0500
Subject: [PATCH] Update main.js

Added "Add Friend" method.
---
 vue-5-dynamic-data/main.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/vue-5-dynamic-data/main.js b/vue-5-dynamic-data/main.js
index f1980a4..b7c4a94 100644
--- a/vue-5-dynamic-data/main.js
+++ b/vue-5-dynamic-data/main.js
@@ -2,9 +2,25 @@ const app = new Vue({
     el: "#app",
     data: {
       editFriend: null,
+      friendname: "",
+      newFriend: false,
       friends: [],
     },
     methods: {
+      addFriend(friend) {
+      	this.friends.push({'name' : friend});
+      	this.friendname = "";
+      	this.newFriend = false;
+
+        fetch("http://rest.learncode.academy/api/vue-5/friends/", {
+          body: JSON.stringify({'name' : friend}),
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        })
+      },
+
       deleteFriend(id, i) {
         fetch("http://rest.learncode.academy/api/vue-5/friends/" + id, {
           method: "DELETE"
@@ -13,6 +29,7 @@ const app = new Vue({
           this.friends.splice(i, 1);
         })
       },
+
       updateFriend(friend) {
         fetch("http://rest.learncode.academy/api/vue-5/friends/" + friend.id, {
           body: JSON.stringify(friend),
@@ -46,6 +63,11 @@ const app = new Vue({
           {{friend.name}}
         </div>
       </li>
+      <div><button v-on:click="newFriend = true">Add</button></div>
+      <div v-if="newFriend === true">
+          <input v-model="friendname" v-on:keyup.13="addFriend(friendname)" />
+          <button v-on:click="addFriend(friendname)">save</button>
+      </div>
     </div>
     `,
-});
\ No newline at end of file
+});