| commit | author | age | ||
| 4f1007 | 1 | <template> |
| CM | 2 | <h2>Manage Goals</h2> |
| 3 | <input type="text" ref="goal" /> | |
| 4 | <button @click="setGoal">Set Goal</button> | |
| 5 | <teleport to="body"> | |
| 6 | <error-alert v-if="inputIsInvalid"> | |
| 7 | <h2>Input is invalid!</h2> | |
| 8 | <p>Please enter at least a few characters...</p> | |
| 9 | <button @click="confirmError">Okay</button> | |
| 10 | </error-alert> | |
| 11 | </teleport> | |
| 12 | </template> | |
| 13 | ||
| 14 | <script> | |
| 15 | import ErrorAlert from './ErrorAlert.vue'; | |
| 16 | ||
| 17 | export default { | |
| 18 | components: { | |
| 19 | ErrorAlert, | |
| 20 | }, | |
| 21 | data() { | |
| 22 | return { | |
| 23 | inputIsInvalid: false, | |
| 24 | }; | |
| 25 | }, | |
| 26 | methods: { | |
| 27 | setGoal() { | |
| 28 | const enteredValue = this.$refs.goal.value; | |
| 29 | if (enteredValue === '') { | |
| 30 | this.inputIsInvalid = true; | |
| 31 | } | |
| 32 | }, | |
| 33 | confirmError() { | |
| 34 | this.inputIsInvalid = false; | |
| 35 | }, | |
| 36 | }, | |
| 37 | }; | |
| 38 | </script> | |
