elissonmichael
diff --git a/‎.gitignore
Lines changed: 14 additions & 0 deletions b/‎.gitignore
Lines changed: 14 additions & 0 deletions
diff --git a/‎vue-5-dynamic-data/index.html
Lines changed: 19 additions & 0 deletions b/‎vue-5-dynamic-data/index.html
Lines changed: 19 additions & 0 deletions
diff --git a/‎vue-5-dynamic-data/main.js
Lines changed: 51 additions & 0 deletions b/‎vue-5-dynamic-data/main.js
Lines changed: 51 additions & 0 deletions
@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+  </head>
+
+  <body>
+    <h1>My Friends</h1>
+    <div id="app"></div>
+
+    <script src="https://unpkg.com/vue"></script>
+    <script src="./main.js"></script>
+  </body>
+
+</html>
@@ -0,0 +1,51 @@
+const app = new Vue({
+    el: "#app",
+    data: {
+      editFriend: null,
+      friends: [],
+    },
+    methods: {
+      deleteFriend(id, i) {
+        fetch("http://rest.learncode.academy/api/vue-5/friends/" + id, {
+          method: "DELETE"
+        })
+        .then(() => {
+          this.friends.splice(i, 1);
+        })
+      },
+      updateFriend(friend) {
+        fetch("http://rest.learncode.academy/api/vue-5/friends/" + friend.id, {
+          body: JSON.stringify(friend),
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        })
+        .then(() => {
+          this.editFriend = null;
+        })
+      }
+    },
+    mounted() {
+      fetch("http://rest.learncode.academy/api/vue-5/friends")
+        .then(response => response.json())
+        .then((data) => {
+          this.friends = data;
+        })
+    },
+    template: `
+    <div>
+      <li v-for="friend, i in friends">
+        <div v-if="editFriend === friend.id">
+          <input v-on:keyup.13="updateFriend(friend)" v-model="friend.name" />
+          <button v-on:click="updateFriend(friend)">save</button>
+        </div>
+        <div v-else>
+          <button v-on:click="editFriend = friend.id">edit</button>
+          <button v-on:click="deleteFriend(friend.id, i)">x</button>
+          {{friend.name}}
+        </div>
+      </li>
+    </div>
+    `,
+});