From bdc40bb496f8c7db1400652032676c656fc667d5 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Sun, 7 Feb 2021 17:30:55 +0100
Subject: [PATCH] lesson 117: add a teleport tag to the ErrorAlert

---
 .../src/components/ManageGoals.vue                     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue b/2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue
index c8f8a10..62400bd 100644
--- a/2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue	
+++ b/2021-02-06 cmp-adv-01-starting-setup/src/components/ManageGoals.vue	
@@ -3,10 +3,12 @@
         <h2>Manage Goals</h2>
         <input type="text" ref="goal" />
         <button @click="setGoal">Set Goal</button>
-        <error-alert v-if="inputIsInvalid">
-            <h2>Input may not be empty</h2>
-            <button @click="resetErrorDialog">Ok</button>
-        </error-alert>
+        <teleport to="body">
+            <error-alert v-if="inputIsInvalid">
+                <h2>Input may not be empty</h2>
+                <button @click="resetErrorDialog">Ok</button>
+            </error-alert>
+        </teleport>
     </div>
 </template>
 <script>