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

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="surname", v-validate="'required'", v-model="form.surname", id="surname". Все входные данные заключены в тег <form>.

Метод 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(), я получаю значения полей. Однако, когда я прикрепляю после них недопустимый флаг, он показывает undefined вместо ожидаемого логического значения. Почему это?


typescript vue.js vee-validate
person randomguy    schedule 26.11.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

person bibsbarreto    schedule 13.08.2019

arrow_upward
0
arrow_downward

Я провел немного больше исследований и поигрался с возвращаемым объектом и выяснил, что к флагам можно получить доступ только после .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)
 }
person randomguy    schedule 26.11.2018