使用规则验证v-form中的v-text-field

Question

我是vue的新手，我正在尝试让验证在v-text-field上工作。我有三个字段，2个可编辑的和一个不可编辑的，其中一个不是从其他两个计算出来的，但只有当它们有效时。因此，我有三个这样定义的字段(为了清楚起见，我将所有内容简化为A、B和C)：

<v-form ref="stif-form">
      <v-row class="ma-4 mt-10 material-input">
        <v-text-field ref="a" sm v-model="A" label="A" dense suffix="kPa" :rules="[...floatRules,positiveRule]" />
      </v-row>
      <v-row class="ma-4 mt-10 material-input">
        <v-text-field ref="b" sm v-model="B" dense :rules="[...floatRules, positiveRule]"/>
      </v-row>
      <v-row class="ma-4 mt-10 material-input">
        <v-text-field sm v-model="C" label="C" disabled dense  />
      </v-row>
   </v-form>

然后我有3个属性，A，B，C，两个手表(使用typescript，所以这是装饰器，但这些等同于js手表)

 @Watch('A')
  onAChanged (a: number) {
    this.setC(a, this.B)
  }

@Watch('B')
   onBChanged (b: number) {
     this.setC(this.A, b)
   }

在setC中，我想通过查找这些字段并查看它们是否有效来确定A和B是否有效(而不是必须编写重复的代码来进行验证)。我已经尝试过了：

setC (a : number, b: number) {
    if (!(this.$refs['a'] as HTMLFormElement).hasError && 
        !(this.$refs['b'] as HTMLFormElement).hasError){
      this.C= (a+b).toFixed(2)
    }
    else this.C= ''
  }

正如您所期望的那样，hasError行工作并返回true和false，但hasError状态是针对上一次按键的，这意味着如果您键入无效的字符，则必须在将C设置为空之前键入另一个字符。我觉得我好像错过了什么。这方面的正确方法是什么？

Answer 1

我有回答自己问题的习惯:)

验证是由表单执行的，因此通过执行以下操作，我将获得最新的验证：

setC (a : number, b: number) {
    if ((this.$refs['stif-form'] as HTMLFormElement).validate()){
      ...
    }
    else this.C= ''
  }