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