Validation between two text field, vuetify

Question

I have two text-field in my vuetify app, I want that the value on the first text field must be less to the second text-field. The value of the second text-field must be greather then the first.

For example when user choose a less value in second text field then the first text field, will recieve a message that 'value can't be less'

Here is what I want to have:

My code is here:

First text-field

 <v-text-field
 v-model="first"
label="First text field"
readonly
v-bind="attrs"
:rules="validateTextField"
v-on="on"
 ></v-text-field>

Second text-field

 <v-text-field
 v-model="second"
label="Secondtext field"
readonly
v-bind="attrs"
:rules="validateTextField"
v-on="on"
 ></v-text-field>

script

validateTextField: [v=>  || 'value cannot be less'],

Answer 1

Try to modify your script like that, separating the rules:

validateFirstTextField: v=> v<this.second|| 'Cannot be more than second',
validateSecondTextField: v=> v>this.first || 'Cannot be less than first'