Vee 验证。在字段值上使用标志返回未定义？用 TypeScript 编写答案

【问题标题】：Vee-Validate. Using flags on the field value returns undefined? Written with TypeScriptVee 验证。在字段值上使用标志返回未定义？用 TypeScript 编写
【发布时间】：2019-04-27 18:13:25
【问题描述】：

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) 时，我得到了字段的值。但是，当我在它们后面附加一个无效标志时，它会显示未定义而不是我期望的布尔值。这是为什么呢？

【问题讨论】：

标签： typescript vue.js vee-validate

【解决方案1】：

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

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

它会正常工作的！

【讨论】：

【解决方案2】：

我做了更多的研究并玩弄了返回的对象，发现标志只能在 .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)
 }

【讨论】：