<template>
    <input type="text" 
        class="input" 
        :class="{'is-danger': has_error}"
        :value="value"
        @input="checkError"
    ></input>
</template>

<script>
    export default {
        props: ["value"],
        data () {
            return { has_error: false};
        },
        methods: {
            checkError (ev) {
                const newValue = ev.target.value;
                this.has_error = isNaN(newValue);
                this.$emit(
                    'input', 
                    // Do the conversion if valid
                    this.has_error ? newValue : Number(newValue)
                ); 
            }
        },
    }
</script>
