From eb387dbd90a2a891ee5ee4458e32cccb460fd9b1 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Mon, 06 Jan 2025 18:15:48 +0100
Subject: [PATCH] first components e props
---
09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue | 40 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 40 insertions(+), 0 deletions(-)
diff --git a/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue
new file mode 100644
index 0000000..1117a94
--- /dev/null
+++ b/09 - deeper into components/cmp-adv-08-teleporting-elements/src/components/ManageGoals.vue
@@ -0,0 +1,40 @@
+<template>
+ <div>
+ <h2>Manage Goals</h2>
+ <input type="text" ref="goal" />
+ <button @click="setGoal">Set Goal</button>
+ <teleport to="body">
+ <error-alert v-if="inputIsInvalid">
+ <h2>Input is invalid!</h2>
+ <p>Please enter at least a few characters...</p>
+ <button @click="confirmError">Okay</button>
+ </error-alert>
+ </teleport>
+ </div>
+</template>
+
+<script>
+import ErrorAlert from './ErrorAlert.vue';
+
+export default {
+ components: {
+ ErrorAlert
+ },
+ data() {
+ return {
+ inputIsInvalid: false
+ };
+ },
+ methods: {
+ setGoal() {
+ const enteredValue = this.$refs.goal.value;
+ if (enteredValue === '') {
+ this.inputIsInvalid = true;
+ }
+ },
+ confirmError() {
+ this.inputIsInvalid = false;
+ }
+ }
+}
+</script>
\ No newline at end of file
--
Gitblit v1.8.0