Как валидировать динамическую форму - PullRequest
Новая
       6

Как валидировать динамическую форму

0 голосов
/ 23 октября 2019

У меня есть динамический указатель даты внутри v-for, предварительно заполненный данными, полученными из формы API с etd и eta, и я хочу убедиться, что eta всегда после etd или равно. Как это сделать в VE-валидации?

Я пробовал 

<div class="d-flex">
          <div class="mx-5">
            <p>
              <strong>ATD</strong>
            </p>
            <el-form-item :prop="'voyage.'+index+'.atd'"
            :error="errors.first('atd-'+index)">
              <el-date-picker
              :name="'atd-'+index"
              v-validate="{
                required: true,
                before: `target-${index}`,
                }"
              data-vv-as="ATD"
              v-model="formFinalise.voyage[index].atd"
              type="date"
              :placeholder="voyage.atd |
              formatDate('DD-MM-YYYY')"></el-date-picker>
            </el-form-item>
          </div>
          <div class="mx-3">
            <p>
              <strong>ETA</strong>
            </p>
            <el-form-item :prop="'voyage.' + index + '.eta'"
            :error="errors.first('eta-'+ index)">
              <el-date-picker
              :name="'eta-' + index"
              data-vv-as="ETA"
              v-validate="{
                required: true,
              }"
              :ref="`target-${index}`"
              v-model="formFinalise.voyage[index].eta"
              type="date"
              :placeholder="voyage.eta |
              formatDate('DD-MM-YYYY')"></el-date-picker>
            </el-form-item>
          </div>

Данные API: 

"voyages": [
        {
            "orderNo": 1,
            "vesselName": "dunhu",
            "voyageNo": "mein",
            "portId": null,
            "atd": "2019-10-21T12:34:08.463Z",
            "eta": "2019-10-21T12:34:08.463Z"
        },
        {
            "orderNo": 2,
            "vesselName": "seafood77",
            "voyageNo": "zzz9",
            "portId": 2,
            "atd": "2019-10-21T12:34:08.463Z",
            "eta": "2019-10-21T12:34:08.463Z"
        }
    ]

, но проверка не запускается сразу после завершения загрузки страницы. есть ли способ исправить это?

...