Vuetify 3中v-form的isFormValid结合Composition API响应式对象失效问题

不需要修改现有表单结构，直接基于你当前的formDataState结构就能实现需求，具体做法如下：

核心实现思路 #

1. 给v-form添加引用（ref），用于调用表单的验证方法
2. 监听表单字段的变化，实时触发验证并更新isFormValid状态
3. 将按钮的禁用状态绑定到!formDataState.isFormValid

具体代码示例 #

模板部分 #

<v-form ref="formRef" @input="updateFormValidity">
  <!-- 循环渲染申请人字段 -->
  <v-text-field
    v-for="(field, key) in formDataState.requestorValues"
    :key="key"
    :label="field.label"
    v-model="field.value"
    :rules="field.rules"
    variant="outlined"
  ></v-text-field>

  <!-- 循环渲染主管字段 -->
  <v-text-field
    v-for="(field, key) in formDataState.supervisorValues"
    :key="key"
    :label="field.label"
    v-model="field.value"
    :rules="field.rules"
    variant="outlined"
    class="mt-4"
  ></v-text-field>
</v-form>

<v-btn 
  class="mt-6"
  color="primary"
  :disabled="!formDataState.isFormValid"
>
  提交表单
</v-btn>

脚本部分 #

import { reactive, ref, watch } from 'vue'

const formRef = ref(null)
const formDataState = reactive({
  requestorValues: {
    name: {
      label: '申请人姓名',
      value: '',
      rules: [v => !!v || '请输入姓名']
    },
    email: {
      label: '申请人邮箱',
      value: '',
      rules: [
        v => !!v || '请输入邮箱',
        v => /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(v) || '邮箱格式不正确'
      ]
    }
  },
  supervisorValues: {
    supervisorName: {
      label: '主管姓名',
      value: '',
      rules: [v => !!v || '请输入主管姓名']
    }
  },
  isFormValid: false
})

// 实时验证表单状态
const updateFormValidity = async () => {
  if (!formRef.value) return
  const isValid = await formRef.value.validate()
  formDataState.isFormValid = isValid
}

// 深度监听字段变化，触发验证
watch(
  [() => formDataState.requestorValues, () => formDataState.supervisorValues],
  updateFormValidity,
  { deep: true }
)

为什么不需要调整结构？ #

Vuetify的表单验证逻辑不依赖状态的层级关系，只要每个表单字段正确绑定了v-model和验证规则，就能通过表单实例的validate()方法获取整体验证结果。你当前把isFormValid放在formDataState根层级的设计完全合理，无需调整为与字段值平级。

如果担心实时验证的性能，也可以改成仅在用户点击提交前触发验证，或者给验证方法添加防抖处理，根据实际场景调整即可。

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