Vee-Validate.Использование флагов в поле возвращает значение undefined?Написано с TypeScript - PullRequest
Новая
       11

Vee-Validate.Использование флагов в поле возвращает значение undefined?Написано с TypeScript

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

https://baianat.github.io/vee-validate/guide/flags.html#introduction

Согласно документации, я должен иметь возможность получить логическое значение при использовании флага для значения одного из полей.Например.

computed: {
    isFormDirty() {
      return Object.keys(this.fields).some(key => this.fields[key].dirty);
    }
 },

Я пытаюсь отключить кнопку отправки моей формы, пока все поля не будут действительными.Моя форма немного длинная, поэтому я буду держать ее короткой.Все атрибуты входов структурированы следующим образом: type = "text", @ change = "updateForm", name = "фамилия", v-validate = "'required'", v-model = "form.surname", id = "фамилия".Все входные данные заключены в тег .

Метод updateForm выглядит следующим образом:

updateForm(event): void { this.$store.commit('updateForm', this.form) }

, где мутация updateForm выглядит следующим образом:

updateForm(state, data) { state.form = data; },

Кнопка отправки выглядит следующим образом:

<button type="submit" :disabled="isFormValid">Submit</button>

, где isFormValid - это вычисляемое свойство, которое выглядит следующим образом:

get isFormValid(): boolean { return Object.keys(this.form).some(key => this.form[key].invalid); }

Данные формытакже является вычисляемым свойством:

get form(): FormData { return this.$store.getters.getForm(); }

Проблема в том, что когда я console.log(Object.keys(this.form).map(key => this.form[key]) или console.log(this.$validator.fields.items.map(item => item.value) внутри isFormValid (), я получаю значения полей.Однако, когда я прикрепляю неверный флаг после них, он показывает неопределенный вместо логического значения, которое я ожидаю.Почему это?

Ответы [ 2 ]

0 голосов
/ 13 августа 2019

У меня была эта проблема, и это было потому, что this.$validator.fields были пустыми, когда компонент рендерился.Если вы используете: 

isFormDirty() {
  if (this.fields) {
    return Object.keys(this.fields).some(key => this.fields[key].dirty);
  }
  return;
}

Это будет работать нормально!

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

Я провел немного больше исследований и поиграл с возвращаемым объектом и выяснил, что флаги доступны только после .flags после $validator.fields.

В итоге я получил массив слогическое значение для всех моих полей, когда я сделал console.log((this.$validator.fields).map(field => field.flags.invalid)).

мой isFormValid () в итоге выглядел так: 

 get isFormValid(): boolean {
    const a = function(e) {
      return e === true;
    }
    return (this.$validator.fields).map(field => field.flags.invalid).some(a)
 }
...