Move Vue form input validation in component into a method - vue.js

Question

I have a Vue componenet for my input field. I have added some validation that makes sure only numbers are added. I added this on the oninput.
I'd like to move this to a method so I can add more checks (eg. if Type !== number)
This works well, but with the validation inline:
<input
v-bind="$attrs"
v-on="{
...$listeners,
input: event => $emit('input', event.target.value)
}"
oninput="this.value = Math.abs(this.value)"
/>
This is how I would like it (but current the validation is not working):
<input
v-bind="$attrs"
v-on="{
...$listeners,
input: event => handleInput(event.target.value)
}"
/>
methods: {
handleInput(value) {
console.log(value);
// 1st emit
this.$emit("input", value);
// 2nd Validate -- Not working...
this.value = Math.abs(this.value);
}
}
Any ideas on how I get this.value = Math.abs(this.value); to feed back into the input?
UPDATE
Thanks to a helpful comment I made some progress. The below code works for the first character but not for ongoing characters.
If numbers are typed, then validation passes true and input emitted.
If 1 character (eg. a) is typed then we emit the number 0. If a second character is inputted then the char is emitted (eg. press b and now the input is 0b)
I can see the this.$emit("input", 0) is triggered, so not sure why char emitted.
methods: {
validateInput(value) {
// if it type isnt set as a number then leave
if (this.type != "number") {
return true;
}
// check if value a number
if (Math.abs(value)) {
return true;
}
return false;
},
handleInput(value) {
if (this.validateInput(value)) {
this.$emit("input", value);
} else {
this.$emit("input", 0);
}
}
}

Answer 1

If you want to check a value before emitting the input event, you could do it like this:
methods: {
validateInput(value) {
if (typeof value !== 'number') { return false; } // check if it's not a string
if (value !== Math.abs(value)) { return false; } // check if value is positive
return true
}
handleInput(value) {
if (this.validateInput(value)) { this.$emit("input", value); }
this.$emit("input") // if value is not a valid input, you may want to do nothing, or emit merely that the event happened.
}
}
A better way of doing a custom input would be to use the value prop of an input, and bind it to a dynamic property in your component, for example by using v-model="value". Fun fact: v-model has a modifier v-model.number which would do exactly what you need.
The only caveat is that you can't directly modify props, so you'd need to use a computed property as a way to automatically handle the 'getting and setting' of your form's value.
// CustomInput.vue
<template>
<input v-bind="$attrs" v-on="$listeners" v-model.number="localValue" />
</template>
<script>
export default {
props: {
value: {
type: Number,
required: true,
}
}
computed: {
localValue: {
get() { return this.value; }
set(newVal) { this.$emit('input', newVal); }
}
}
}
</script>
You don't need to make a custom component for this case. You could simply use v-model.number in the parent and it would work. Once your inputs get more complex, you want to modify the set method a bit to set(newVal) { if (this.validateInput(newVal)) {this.$emit('input', newVal);} }, defining your own 'validateInput' method.
If you find you're writing a lot of different validations for different use cases, look into libraries like Vuelidate and VeeValidate