make the contact list dynamic

2021-01-25 23:03:45 +01:00 · 2021-01-25 23:03:45 +01:00 · 00f3bb1150
parent 81a2636d88
commit 00f3bb1150
1 changed files with 5 additions and 9 deletions
--- a/vue-cli-01-a-new-vue-project/src/App.vue
+++ b/vue-cli-01-a-new-vue-project/src/App.vue
@ -3,15 +3,11 @@
        <header><h1>My Friends</h1></header>
        <ul>
            <friend-contact
-                name="Manuel Lorenz"
-                email-address="manuel@localhost.com"
-                phone-number="0123 4567 890"
-                is-favorite="1"
-            ></friend-contact>
-            <friend-contact
-                name="Julie Jones"
-                email-address="julie@localhost.com"
-                phone-number="0123 4567 890"
+                v-for="friend in friends"
+                :key="friend.id"
+                :name="friend.name"
+                :email-address="friend.email"
+                :phone-number="friend.phone"
            ></friend-contact>
        </ul>
    </div>