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

Question

我是vue的新手，我正在尝试验证以在v-text-field上工作。我有三个字段，两个可编辑，一个不可编辑，不可编辑的字段是根据其他两个字段计算的，但只有当它们有效时。因此，我定义了三个字段(将所有字段简化为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，所以这是用decorator，但这些相当于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= ''
}