I am trying to validate a field with vee validate that depends on 2 other input parameters. The field which needs to be validated is an average value field that must not be greater than a given maximum and not less than a given minimum.
<v-text-field v-model="kind.bhd_min"
v-validate="'required|minBHD:maxBHD'"
v-currency="{locale:'de', currency:null}"
ref="minBHD"
...>
</v-text-field>
<v-text-field v-model="kind.bhd_max"
v-validate="'required'"
v-currency="{locale:'de', currency:null}"
ref="maxBHD"
...>
</v-text-field>
<v-text-field v-model="kind.average_bhd"
:data-vv-name="`average_bhd-${index}`"
v-validate="'required|averageBHD:minBHD,maxBHD'"
v-currency="{locale:'de', currency:null}"
:error-messages="errors.first(`average_bhd-${index}`)">
</v-text-field>
My custom rule looks like this:
const averageBHD = {
validate: (value, [min,max] = {}) => {
console.log(value,min,max);
return value > min && value < max;
},
};
Validator.extend('averageBHD', averageBHD, {hasTarget: true});
The custom rule is called properly as the console.log() outputs some values when dirtying the related fields. However, the second parameter (max) is never the actual value of the the referenced field but the string literal "maxBHD" which appears to be the value of the ref attribute. The first parameter min is logged correctly, thus indicating that the ref is working.
What am I doing wrong? It should be possible to reference multiple fields in a custom rule, right?