add props to the component

vue-cli-01-a-new-vue-project/src/App.vue

@@ -1,9 +1,19 @@
 <template>
-    <header><h1>My Friends</h1></header>
-    <ul>
-        <friend-contact></friend-contact>
-        <friend-contact></friend-contact>
-    </ul>
+    <div>
+        <header><h1>My Friends</h1></header>
+        <ul>
+            <friend-contact
+                name="Manuel Lorenz"
+                email-address="manuel@localhost.com"
+                phone-number="0123 4567 890"
+            ></friend-contact>
+            <friend-contact
+                name="Julie Jones"
+                email-address="julie@localhost.com"
+                phone-number="0123 4567 890"
+            ></friend-contact>
+        </ul>
+    </div>
 </template>
 
 <script>

vue-cli-01-a-new-vue-project/src/components/FriendContact.vue

@@ -1,25 +1,20 @@
 <template>
     <li>
-        <h2>{{ friend.name }}</h2>
+        <h2>{{ name }}</h2>
         <button @click="toggleDetails()">{{ buttonDetailsText }}</button>
         <ul v-if="detailsAreVisible">
-            <li><strong>Phone:</strong> {{ friend.phone }}</li>
-            <li><strong>Email:</strong> {{ friend.email }}</li>
+            <li><strong>Phone:</strong> {{ phoneNumber }}</li>
+            <li><strong>Email:</strong> {{ emailAddress }}</li>
         </ul>
     </li>
 </template>
 
 <script>
 export default {
+    props: ["name", "emailAddress", "phoneNumber"],
     data() {
         return {
             detailsAreVisible: false,
-            friend: {
-                id: "manuel",
-                name: "Manuel Lorenz",
-                phone: "01234 5678 991",
-                email: "manuel@localhost.com",
-            },
         };
     },
     computed: {