Vuetify中监听输入时v-form校验结果延迟如何解决？

问题原因 #

你遇到的校验状态滞后是因为Vuetify的表单校验逻辑是异步执行的。你监听的是input值的变化，当input变更触发watch回调时，v-form的校验流程还未完成，formValid还没来得及更新，此时你拿到的是上一次的状态，所以会出现差了一次更新的表现。

解决方法 #

方法1：直接监听formValid（最推荐）

不要监听input，直接监听绑定在v-form上的formValid即可，回调触发时拿到的必然是最新的校验结果：

watch: {
  formValid(newVal) {
    console.log('formValid', newVal)
  }
}

方法2：在input的watch中等待状态更新

如果确实需要在input变化时执行逻辑，可以用$nextTick等待所有同步状态更新完成后再读取formValid，也可以手动调用表单的validate方法主动获取最新校验状态：

watch: {
  async input() {
    // 方案A：用$nextTick等待校验逻辑执行完成
    this.$nextTick(() => {
      console.log('formValid', this.formValid)
    })

    // 方案B：手动触发表单校验拿结果
    const isValid = await this.$refs.testForm.validate()
    console.log('最新校验状态', isValid)
  }
}

内容的提问来源于stack exchange，提问作者nathan1658