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

Question

我正在尝试从计算的 prop 访问验证标志:

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 :

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

使用该示例，您的计算 Prop 将是:

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

v2 demo

在 v3 中，您可以 use the <ValidationProvider> component轻松访问模板中的验证标志:

<ValidationProvider rules="required" v-slot="{ touched, invalid }">
  <pre>touched:{{touched}} invalid:{{invalid}}</pre>
  <input type="email" v-model="value">
</ValidationProvider>

v3 demo