Vee-validate: пользовательское правило вызывается несколько раз - PullRequest
Новая
       7

Vee-validate: пользовательское правило вызывается несколько раз

0 голосов
/ 17 ноября 2018

У меня есть пользовательское правило, чтобы проверить, является ли имя уникальным, текстовое поле существует несколько раз в моей форме, потому что форма повторяемая

Я сделал небольшую простую демонстрацию -> https://codesandbox.io/s/v81mxn2ojy взгляните в консоли, чтобы убедиться, что проверка вызывается несколько раз, если я пишу внутри текстовых полей. Это складывается, если я переключаюсь между текстовыми полями и изменяю значение.

шаблон 

<p class="sizes__input" v-for="(size, i) in sizes">
  <span>Size: </span>
  <input
    type="text"
    :name="`prefix${i}`"
    class="textfield max-dim__input"
    v-model="size.prefix"
    maxlength="8"
    autocomplete="off"
    v-validate="{ required: true, unique: prefixes }"
    :class="{ error: errors.has(`prefix${i}`) }"
  />
</p>

Сценарий 

data() {
    return {
      sizes: [
        { prefix: "xl_", width: "1400", height: "1400" },
        { prefix: "l_", width: "1100", height: "1100" },
        { prefix: "m_", width: "800", height: "800" },
        { prefix: "s_", width: "600", height: "600" },
        { prefix: "thumb_", width: "200", height: "200" }
      ]
    };
  },
  computed: {
    prefixes() {
      console.log("prefix");
      if (this.sizes) {
        return this.sizes.map(item => {
          return item.prefix;
        });
      }
    }
  }

правило 

const unique = {
  getMessage(field) {
    return `Such ${field} already exists.`;
  },
  validate(value, args) {
    if (value) {
      console.log(value, args, args.indexOf(value));
      return args.indexOf(value) === -1;
    }
    return false;
  }
};

Validator.extend("unique", unique, {
  immediate: false
});

хорошо, нашел решение На фокусе я фильтрую данные и отправляю это на мой валидатор.

InputField 

<input
    v-validate="{ required: true, unique: filteredSizes }"
    @focus="filterSizes(i);"

добавлены отфильтрованные размеры 

data() {
  return {
    filteredSizes: [],
    sizes:

в фокусе 

filterSizes(i) {
  const otherSizes = [...this.sizes];
  otherSizes.splice(i, 1);
  this.filteredSizes = otherSizes.map(item => {
    return item.prefix;
  });
}

https://codesandbox.io/s/38qyyymyw5

1 Ответ

0 голосов
/ 17 ноября 2018

Я полагаю, что это может быть так.

Вам нужно использовать blur поведение.Существуют альтернативные события, которые могут дать вам такое же поведение blur с использованием атрибута data-vv-validate-on для переопределения событий по умолчанию.

Примеры:

Для мультиселекции он генерирует событие закрытия при раскрывающемся менюзакрывается, что также происходит, когда пользователь покидает элемент управления. 

<multiselect data-vv-validate-on="input|close" ...>

Для средства выбора даты можно вместо этого выполнить проверку при закрытии, поскольку это событие генерируется, когда пользователь покидает элемент управления. 

<datepicker data-vv-validate-on="input|closed" ...>

VeeValidate Doc

Надеюсь, это поможет.

...