VueJS - Vee-Validate: Пользовательское правило для вызова метода / функции для оценки результата? - PullRequest
Новая
       7

VueJS - Vee-Validate: Пользовательское правило для вызова метода / функции для оценки результата?

0 голосов
/ 09 декабря 2018

Извините, я все еще очень плохо знаком с VueJS и его фреймворком.

Я пытаюсь использовать vee-validate и пользовательское правило для проверки значения поля ввода по отношению к ответу Axios GET наAPI-интерфейс.По сути, если вы введете неверный идентификатор, он выдаст ошибку до тех пор, пока вы не сделаете это правильно (т. Е. При назначении заявки действительному сотруднику необходимо ввести действительный идентификатор сотрудника).

Мой код шаблона выглядитвот так прямо сейчас: 

     <b-col cols="4">
        <b-input-group>
          <b-input-group-text style="width:150px;" slot="prepend">Key Owner</b-input-group-text>
          <input
            class="form-control"
            v-model="selected_owner_id"
            type="text"
            id="ownerId"
            name="ownerId"
            data-vv-delay="800"
            @change="validateCorpId"
            v-validate="'ownerId|required'"
            v-bind:class="{'form-control': true, 'error': errors.has('ownerId') }"
          >
        </b-input-group>
        <span v-show="errors.has('ownerId')" class="text-danger">{{ errors.first('ownerId') }}</span>
      </b-col>

(я возился с тем, как это сделать, поэтому @change к функции, которая фактически вызывает API-интерфейс Axios)

Вот ValidateПравило расширения, которое я сделал в том же файле * .vue, что и выше: 

<script>
import { Validator } from "vee-validate";
import VeeValidate from 'vee-validate'

Validator.extend('ownerId', {
  // Custom validation message
  getMessage: (field) => `The ${field} is not a valid ID.`,
  // Custom validation rule
  validate: (value) => new Promise(resolve => {        
    resolve({
        valid: value && (this.validateCorpId(value))
      });
  })
});

...etc...

Функция validateCorpId (value) позже в методах: {} block

Я пыталсяпройтись по документам Vee-Validate о том, как правильно создать пользовательское правило проверки, но как новичку многие вещи все еще кажутся недостающими, например, где этот Validate.extend на самом деле должен сидеть?Где я разместил его сверху в области «script» или внутри функций «create» или «mount»?

Я попробовал это, и он сразу вызывается, что не то, что я хочу - я хочу, чтобы это происходило только тогда, когда вы вводите или изменяете данные в поле, которое вызывает функция, которая возвращает true| false значение.

Я также добавил поле is_selected_owner_id_valid в блок возврата «data», и мой вызов Axios установил значение true | false в зависимости от результата, но, поскольку это булево значение, правило Validate прочитало егосразу, и он оценился неправильно.

Я рад продолжать работать над этим для себя, но есть ли у кого-нибудь полностью работающее пользовательское правило Validate, которое я смог увидеть и перепроектировать?Действительно трудно найти пример того, что я пытаюсь сделать, включая вызов API как часть правила.

1 Ответ

0 голосов
/ 10 декабря 2018

Мне удалось решить мою проблему, изначально скопировав аналогичный опубликованный ответ здесь:

Vee-validate (VueJS) - асинхронная оценка условия

Пока этоработает, я не уверен, что в пользовательском правиле есть фактический вызов APi.Тем не менее, благодаря предложению Уолтера Цехаса, я собираюсь вписать свое решение ретро в этот пример при условии: https://baianat.github.io/vee-validate/examples/async-backend-validation.html

(я думал, что я прошел все проверочные примеры ... ябыл неправ!)

...