force a new validation if another related field changed - vue.js

Question

I want to validate two textfields which are related to each other. The first one must be smaller than the second one (e.g. min/max, start date/end date).
So for the coding part I created this
HTML:
<div id="app">
<v-app id="inspire">
<v-text-field
v-model="values[0]"
:rules="firstValidation"
></v-text-field>
<v-text-field
v-model="values[1]"
:rules="secondValidation"
></v-text-field>
</v-app>
</div>
JS:
new Vue({
el: '#app',
data () {
return {
values: [1, 2]
}
},
computed: {
firstValidation: function () {
return [value => parseFloat(value) < this.values[1] || "Must be less than second value"]
},
secondValidation: function () {
return [value => parseFloat(value) > this.values[0] || "Must be greater than first value"]
}
}
})
I will also provide a snippet here
https://codepen.io/anon/pen/NZoaew?editors=1010
When I change the value of one field the other one will not revalidate. Steps to reproduce:
change the value of the first field to 12
the second field has a value of 2 so you will get an error
change the value of the second field to 22
now the form is valid but the first field still throws the error because it didn't revalidate.
remove one character from the first field
now this field revalidates and you can submit it. Is there a mechanism to revalidate the other field on changes and vice versa?
I think a possible solution would be to listen to the #input event of a field but how would you force the other field to revalidate then?

Answer 1

This will validate them both but only show an error in the field once the user has typed in that field:
new Vue({
el: '#app',
data () {
return {
values: [1, 2],
firstValidation: [true],
secondValidation: [true]
}
},
methods: {
validate: function (index) {
const valid = (this.values[0] - this.values[1]) < 0
if (valid) {
this.firstValidation = [true];
this.secondValidation = [true];
return;
}
if (index > 0)
this.secondValidation = ["Must be greater than first value"];
else
this.firstValidation = ["Must be less than second value"];
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.16/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-text-field
v-model="values[0]"
#input="validate(0)"
:rules="firstValidation"
></v-text-field>
<v-text-field
v-model="values[1]"
#input="validate(1)"
:rules="secondValidation"
></v-text-field>
</v-app>
</div>
(I'm not sure why the styles aren't rendering but it uses the same scripts as your codepen)

Answer 2

Any reason why your data model is an array? Be mindful of this. From the docs
Due to limitations in JavaScript, Vue cannot detect the following
changes to an array:
When you directly set an item with the index, e.g.
vm.items[indexOfItem] = newValue
i.e. when values[1] = parseFloat($event) is called, it is NOT reactive. I would avoid this if possible, otherwise use $set. Then to force validation of the field when another field changes, you will have to watch for the change and then manually call validation.
Template
<div id="app">
<v-form ref="form"> <!-- Need a reference to the form to validate -->
<v-app id="inspire">
<v-text-field
:value="values[0]"
:rules="firstValidation"
#input="$set(values, 0, parseFloat($event))"
></v-text-field>
<v-text-field
:value="values[1]"
:rules="secondValidation"
#input="$set(values, 1, parseFloat($event))"
></v-text-field>
<v-btn #click="submit">Submit</v-btn>
</v-app>
</form>
</div>
Code
Add this to your component
methods: {
submit: function(){
console.log(this.values);
},
validate: function() {
// manually call validation
this.$refs.form.validate();
}
},
watch: {
// watch for change and then validate
values: 'validate'
}
See updated working codepen