How to validate inputs in Vue.js using v-model?

Question

JavaScript

there are 5 variables:
all_values: 1000
value_1: 100
value_2: 100
value_3: 150
value_4: 150
The sum of all value_[1-4] variables should not be greater than all_values,
How to add validation to the v-model so that if the input value is not valid, did the previous valid value go into the input?
- Inputs can be in different components, connected via Vuex
- I tried via v-directive, but I still haven't figured out how to pass the value of the variable into the function.

Answer 1

Don't use v-model, use :value and @input separately. Do a validation in @input.
An even less preferable option, IMHO, is to follow the variable bound to v-model through watch and do validation.