Проверка динамических полей с помощью привязки полей v-проверки

#vue.js #vuejs2 #vue-component

Вопрос:

Я проверяю дату в средстве выбора даты и времени, используя следующий код:

  <tr v-for="(input,k) in inputs" :key="k">
    <datetime v-validate="validators.ArrivalDate" format="YYYY-MM-DD H:i:s" name="arrivalDateTime" v-model="input.arrivalDateTime" ></datetime> 
 <tr>
 

скрипт:

 data(){
return {
validators: {
            ArrivalDate: {
                required: true,
                date_format: 'yyyy-MM-dd HH:mm:ss',
                after: this.inputs.departureDateTime,
            }
            },
  inputs: [
              {
                name:'',
                arrivalDateTime: '',
                departureDateTime:'',
}]
..
 

я хочу, чтобы время даты прибытия было больше, чем this.inputs.departureDateTime время даты отправления в поле. Единственная проблема в том, что я хочу также передать индекс полей after:this.inputs.departureDateTime .
Любая помощь будет высоко оценена.

Ответ №1:

Вы можете использовать v-validate строку, содержащую динамическое значение after для каждого v-for итератора:

 <tr v-for="(input,k) in inputs" :key="k">
  <datetime 
    name="departureDateTime"
    v-validate="'date_format:yyyy-MM-dd HH:mm:ss|required'"
    v-model="input.departureDateTime"
  >
  </datetime>

  <datetime 
    name="arrivalDateTime"        👇
    v-validate="`after:${input.departureDateTime}|date_format:yyyy-MM-dd HH:mm:ss|required`"
    v-model="input.arrivalDateTime"
  >
  </datetime>
<tr>
 

ДЕМОНСТРАЦИЯ