From ebcf9ccbef66e8708f9f001659b08e8ad242cca9 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 25 Jan 2021 12:17:00 +0100
Subject: [PATCH] implement for loop

---
 cmp-intro-01-starting-setup/app.js     |  2 +-
 cmp-intro-01-starting-setup/index.html | 16 ++++------------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/cmp-intro-01-starting-setup/app.js b/cmp-intro-01-starting-setup/app.js
index a9c8702..9e2abe5 100644
--- a/cmp-intro-01-starting-setup/app.js
+++ b/cmp-intro-01-starting-setup/app.js
@@ -22,4 +22,4 @@ const app = Vue.createApp({
     methods: {},
 });
 
-app.mount("app");
+app.mount("#app");
diff --git a/cmp-intro-01-starting-setup/index.html b/cmp-intro-01-starting-setup/index.html
index bec4874..b497c59 100644
--- a/cmp-intro-01-starting-setup/index.html
+++ b/cmp-intro-01-starting-setup/index.html
@@ -17,20 +17,12 @@
     </header>
     <section id="app">
         <ul>
-            <li>
-                <h2>Manuel Lorenz</h2>
+            <li v-for="friend in friends">
+                <h2>{{ friend.name }}</h2>
                 <button>Show Details</button>
                 <ul>
-                    <li><strong>Phone:</strong> 01234 5678 991</li>
-                    <li><strong>Email:</strong> manuel@localhost.com</li>
-                </ul>
-            </li>
-            <li>
-                <h2>Julie Jones</h2>
-                <button>Show Details</button>
-                <ul>
-                    <li><strong>Phone:</strong> 09876 543 221</li>
-                    <li><strong>Email:</strong> julie@localhost.com</li>
+                    <li><strong>Phone:</strong> {{ friend.phone }}</li>
+                    <li><strong>Email:</strong> {{ friend.email }}</li>
                 </ul>
             </li>
         </ul>