Question

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

根据文档，在其中一个字段的值上使用标志时，我应该能够获得布尔值。例如。

command prompt

我正在尝试禁用表单的“提交”按钮，直到所有字段均有效。我的表格有点长，所以我会尽量简短。输入的所有属性的结构如下：type =“ text”，@ change =“ updateForm”，name =“ surname”，v-validate =“'required'”，v-model =“ form.surname” ，id =“姓”。所有输入都由

标记包装。

updateForm方法如下：

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

突变“ updateForm”如下所示：

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

“提交”按钮如下所示：

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

其中isFormValid是一个类似以下内容的计算属性：

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

表单数据也是计算属性：

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

问题是当我在isFormValid（）中get form(): FormData { return this.$store.getters.getForm(); }或console.log(Object.keys(this.form).map(key => this.form[key])时，正在获取字段的值。但是，当我在它们后面附加无效标志时，它显示未定义而不是我期望的布尔值。为什么会这样？

Answer 1

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

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

它将正常工作！

Answer 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)
 }

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

2 个答案: