<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 may not be empty</h2>
                <button @click="resetErrorDialog">Ok</button>
            </error-alert>
        </teleport>
    </div>
</template>
<script>
import ErrorAlert from "./ErrorAlert";

export default {
    components: {
        ErrorAlert,
    },
    data() {
        return {
            inputIsInvalid: false,
        };
    },
    methods: {
        setGoal() {
            const enteredValue = this.$refs.goal.value;
            if (enteredValue === "") {
                this.inputIsInvalid = true;
            }
        },
        resetErrorDialog() {
            this.inputIsInvalid = false;
        },
    },
};
</script>
