Vuejs Валидация с зависимостями
Вообщем у меня есть такая форма:
<v-form ref="form" v-model="valid" lazy-validation>
<v-menu ref="menu" v-model="menu" :close-on-content-click="false" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field v-model="dateFormatted" :label="$t('form.date')" dense outlined v-bind="attrs" v-on="on" @blur="date = parseDate(dateFormatted)"></v-text-field>
</template>
<v-date-picker ref="picker" v-model="date" :max="new Date().toISOString().substr(0, 10)" min="1970-01-01" @change="saveDate" first-day-of-week="1" :locale="this.$root.$i18n.locale">
</v-date-picker>
</v-menu>
<v-select :items="category" :label="$t('form.category')" :rules="categoryRules" dense outlined item-text="title" item-value="id" v-model="category_id" required></v-select>
<v-radio-group v-model="currency" row :label="$t('form.currency')" :rules="currencyRules" dense outlined>
<v-radio v-for="item in currencies" :key="item.type" :label="item.label" on-icon="radio_button_checked" :value="item.type" off-icon="radio_button_unchecked"></v-radio>
</v-radio-group>
<v-radio-group v-model="type" row :label="$t('form.type')" :rules="typeRules" dense outlined>
<v-radio v-for="item in types" :key="item.type" :label="item.label" on-icon="radio_button_checked"
:value="item.type" off-icon="radio_button_unchecked"></v-radio>
</v-radio-group>
<v-text-field type="number" :label="$t('form.amount')" :rules="amountRules" v-model="amount" dense outlined required></v-text-field>
<v-text-field :label="$t('form.description')" maxlength="255" v-model="description" dense outlined></v-text-field>
</v-form>
И js код к этому:
data () {
return {
date: new Date().toISOString().substr(0, 10),
dateFormatted: this.saveDate(new Date().toISOString().substr(0, 10)),
menu: false,
category_id: '',
categoryRules: [
v => !!v || this.$i18n.t('form.errors.categoryRequired'),
],
currency: 'rub',
currencies: [
{ type: 'rub', label: 'RUB' },
{ type: 'usd', label: 'USD' },
{ type: 'eur', label: 'EUR' }
],
currencyRules: [
v => !!v || this.$i18n.t('form.errors.currencyRequired'),
],
type: 'income',
types: [
{ type: 'income', label: 'Доход' },
{ type: 'outcome', label: 'Расход' }
],
typeRules: [
v => !!v || this.$i18n.t('form.errors.typeRequired'),
],
amount: 0,
amountRules: [
v => !!v || this.$i18n.t('form.errors.amountRequired'),
v => (v > 0) || this.$i18n.t('form.errors.amountAboveZero'),
v => (this.type === 'outcome' ? (this.currency === 'rub' ? (v < this.$store.getters.profile.balanceRUB)
|| this.$i18n.t('form.errors.amountInsufficient') : (this.currency === 'usd' ? (v < this.$store.getters.profile.balanceUSD)
|| this.$i18n.t('form.errors.amountInsufficient') : ((v < this.$store.getters.profile.balanceEUR)
|| this.$i18n.t('form.errors.amountInsufficient')))) : true) ,
],
description: '',
valid: false
}
},
Как видите парвила для поля amount выгялдят как полный хаус потому что связано сдругими полями, поскольку библиотеками кроме vuetify, я не польлзуюсь, если какой нибуть способ написать данные правила, более ... лучше?? т.к. у меня будет еще одна подобная форма.