Vuetify对话框内表单提交后重置失效，再次打开触发必填项校验错误如何解决

问题原因 #

你在提交成功关闭对话框前调用reset和resetValidation仅清除了当时的校验状态，下次打开对话框时，父组件先给dataRow赋值为空对象，触发表单绑定的data.name变为空值，此时表单仍保留了上次提交时的「已交互」状态，因此会立刻触发必填校验提示错误。

可行解决方法 #

下面三个方案任选其一即可，推荐优先用方案3，配置最简单。

方案1：监听对话框打开状态，打开时清除校验

在子组件的watch中增加对value（即dialog的v-model绑定值）的监听，对话框打开、DOM渲染完成后清除校验状态：

watch: {
  // 原有dataRow监听保留
  dataRow(val) {
    this.data = { ...val };
  },
  // 新增对dialog显示状态的监听
  value(newVal) {
    if (newVal) {
      this.$nextTick(() => {
        // 仅清除校验状态，不会覆盖已经赋值的表单数据
        this.$refs.form?.resetValidation()
      })
    }
  }
}

方案2：表单数据更新后清除校验

在dataRow的监听逻辑中，赋值完表单数据后，同步清除校验状态：

watch: {
  dataRow(val) {
    this.data = { ...val };
    this.$nextTick(() => {
      this.$refs.form?.resetValidation()
    })
  }
}

方案3：对话框关闭时销毁内部DOM

给v-dialog组件添加destroy-on-close属性，每次关闭对话框都会销毁内部的表单DOM，下次打开时重新渲染，天然不会残留之前的校验状态，无需额外写JS逻辑：

<v-dialog 
  v-model="value" 
  max-width="500px" 
  @click:outside="close"
  destroy-on-close <!-- 新增这一行 -->
>

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