extend props example

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

@@ -6,6 +6,7 @@
                 name="Manuel Lorenz"
                 email-address="manuel@localhost.com"
                 phone-number="0123 4567 890"
+                is-favorite="1"
             ></friend-contact>
             <friend-contact
                 name="Julie Jones"

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

@@ -1,7 +1,8 @@
 <template>
     <li>
-        <h2>{{ name }}</h2>
+        <h2>{{ name }} {{ isFavoriteText }}</h2>
         <button @click="toggleDetails()">{{ buttonDetailsText }}</button>
+        <button @click="toggleFavorite()">Mark as Favorite</button>
         <ul v-if="detailsAreVisible">
             <li><strong>Phone:</strong> {{ phoneNumber }}</li>
             <li><strong>Email:</strong> {{ emailAddress }}</li>
@@ -11,10 +12,33 @@
 
 <script>
 export default {
-    props: ["name", "emailAddress", "phoneNumber"],
+    //props: ["name", "emailAddress", "phoneNumber"],
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        phoneNumber: {
+            type: String,
+            required: true,
+        },
+        emailAddress: {
+            type: String,
+            required: true,
+        },
+        isFavorite: {
+            type: String,
+            required: false,
+            default: "0",
+            validator: function(value) {
+                return value === "0" || value === "1";
+            },
+        },
+    },
     data() {
         return {
             detailsAreVisible: false,
+            friendIsFavorite: this.isFavorite,
         };
     },
     computed: {
@@ -25,11 +49,25 @@ export default {
                 return "Show Details";
             }
         },
+        isFavoriteText() {
+            if (this.friendIsFavorite === "1") {
+                return "(Favorite)";
+            } else {
+                return "";
+            }
+        },
     },
     methods: {
         toggleDetails() {
             this.detailsAreVisible = !this.detailsAreVisible;
         },
+        toggleFavorite() {
+            if (this.friendIsFavorite === "1") {
+                this.friendIsFavorite = "0";
+            } else {
+                this.friendIsFavorite = "1";
+            }
+        },
     },
 };
 </script>