From d737b3d88ccc2053d06225a3e25f946d7e37c85f Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 25 Jan 2021 18:52:30 +0100
Subject: [PATCH] extend props example

---
 vue-cli-01-a-new-vue-project/src/App.vue      |  1 +
 .../src/components/FriendContact.vue          | 42 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/vue-cli-01-a-new-vue-project/src/App.vue b/vue-cli-01-a-new-vue-project/src/App.vue
index 21ac694..39c4a58 100644
--- a/vue-cli-01-a-new-vue-project/src/App.vue
+++ b/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"
diff --git a/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue b/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
index b59d9c7..0efdacc 100644
--- a/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
+++ b/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>