implement for loop

cmp-intro-01-starting-setup/app.js

@@ -22,4 +22,4 @@ const app = Vue.createApp({
     methods: {},
 });
 
-app.mount("app");
+app.mount("#app");

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>