使用VeeValidate，我如何查看某个字段是否被触摸并且有效？

Question

我正在尝试从计算的道具访问验证标志：

computed: {
  isFormValid() {
    let isValid = this.$validator.fields.some(field => {
      console.log(field.flags);
      return field.flags.touched; || field.flags.invalid;
    });
    console.log("isValid", isValid);
    return isValid;
  }
},

但是这会导致错误："TypeError: this.$validator.fields.some is not a function"

因此，我想到了要遍历observable：

let isValid = Array.from(this.$validator.fields).some(field => {
  console.log(field.flags);
  return field.flags.touched; //|| field.flags.invalid;
});

是的！进展！没有更多的错误。但是当我更改表单输入值时，它不会重新计算。

那么我该怎么做？

Answer 1

从组件中通过v2 docs show an example迭代this.fields（而不是this.$validator.fields的Object.keys：

Object.keys

使用该示例，您计算出的属性将是：

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

export default {
  // ...
  computed: {
    isFormTouchedOrInvalid() {
      return Object.keys(this.fields).some(key => this.fields[key].touched || this.fields[key].invalid);
    }
  },
  //...
}

在v3中，您可以v2 demo轻松访问模板中的验证标志：

use the <ValidationProvider> component

<ValidationProvider>