Я должен сделать несколько проверок на странице, используя vee-validate. Одна из проверок сравнивает значения двух компонентов даты, чтобы убедиться, что одно из них меньше другого.
Родительский компонент:
<template>
<validation-observer>
...
<div class="row">
<div class="group">
<DateInput dateFormat="MM/dd/yyyy" validationRules="required|date_format:MM/dd/yyyy|before:Comp2" ref="Comp1" :value="date1" v-model="receiptDetails.REFAudReceived"></DateInput>
</div>
<div class="form-group">
<DateInput dateFormat="MM/dd/yyyy" validationRules="required|date_format:MM/dd/yyyy|after:Comp1" ref="Comp2" :value="date2" v-model="receiptDetails.REFAurRespon"></DateInput>
</div>
</div>
...
</validation-observer>
</template>
DateInput - это пользовательский компонент, в котором датасохраняются. Вот код для DateInput
:
<template>
<validation-provider
:rules="validationRules"
:immediate="true"
tag="div"
ref="validationProvider"
>
<template slot-scope="{ errors }">
<div>
<div class="group">
<input type="text" @blur="validate()" ref="dateInput" />
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
<span v-show="errors.length > 0" class="is-invalid">{{ errors[0] }}</span>
</template>
</validation-provider>
</template>
Я правильно внедряю v-model
для этого компонента (подтверждено с помощью инструментов vue dev)
Теперь я ввожу следующие даты: Comp1: 10/ 01/2019 Comp2: 11/30/2019
с помощью инструментов Vue Dev Я подтверждаю, что значения date1
и date2
равны 10/01/2019 и 30.11.2009 соответственно.
Я все еще вижу, что проверка не проходит. Как я могу реализовать это правильно?