Vee-验证。在未定义的字段值 returns 上使用标志？用 TypeScript 编写

Question

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(); }

问题是当我在 isFormValid() 中 console.log(Object.keys(this.form).map(key => this.form[key]) 或 console.log(this.$validator.fields.items.map(item => item.value) 时，我正在获取字段的值。但是，当我在它们后面附加一个无效标志时，它显示未定义而不是我期望的布尔值。这是为什么？

Answer 1

我做了更多研究并研究了返回的对象，发现标志只能在 $validator.fields 之后的 .flags 之后访问。

当我这样做时，我最终得到了一个包含我所有字段的布尔值的数组 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)
 }

Answer 2

我遇到了这个问题，这是因为 this.$validator.fields 在渲染组件时是空的。如果您使用：

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

它会很好用！

Vee-验证。在未定义的字段值 returns 上使用标志？用 TypeScript 编写

Vee-Validate. Using flags on the field value returns undefined? Written with TypeScript

typescript

vue.js

vee-validate