From 1b34a7753fa1ff47d1609e16da79c05f43803d6b Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 25 Jan 2021 18:04:57 +0100
Subject: [PATCH] make the button text dynamic

---
 .../src/components/FriendContact.vue                  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

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 3a1ee50..e1013d0 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,7 @@
 <template>
     <li>
         <h2>{{ friend.name }}</h2>
-        <button @click="toggleDetails()">Show Details</button>
+        <button @click="toggleDetails()">{{ buttonDetailsText }}</button>
         <ul v-if="detailsAreVisible">
             <li><strong>Phone:</strong> {{ friend.phone }}</li>
             <li><strong>Email:</strong> {{ friend.email }}</li>
@@ -22,6 +22,15 @@ export default {
             },
         };
     },
+    computed: {
+        buttonDetailsText() {
+            if (this.detailsAreVisible) {
+                return "Hide Details";
+            } else {
+                return "Show Details";
+            }
+        },
+    },
     methods: {
         toggleDetails() {
             this.detailsAreVisible = !this.detailsAreVisible;