Vue 3 中使用 VeeValidate 正确处理嵌套表单数据的响应式更新

✅ 正确方案：改用 useForm() + 手动合并初始值

VeeValidate 4 推荐使用组合式 API 的 useForm()，它提供对当前表单状态（values）、校验控制及重置逻辑的完全掌控。关键在于：必须将嵌套数据“展平”或“深度合并”为单一响应式对象，而非保留嵌套引用结构。

以下是重构后的 GeneralSettings.vue 核心逻辑：

SoundRaw AI

面向创作者的 AI 音乐生成器，只需选择情绪、流派和长度，SoundRaw AI就能为你生成优美的歌曲。

下载

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useForm } from 'vee-validate';
import useCompanyDetailsQuery from 'src/composables/useCompanyDetailsQuery';
import useAuthInfoQuery from 'src/composables/useAuthInfoQuery';

// 1. 使用 Vue Query 获取数据（返回 ref 包裹的响应式数据）
const {
  data: companyData,
  isLoading: companyIsLoading,
  error: companyError,
} = useCompanyDetailsQuery();

const {
  data: authData,
  isLoading: authIsLoading,
  error: authError,
} = useAuthInfoQuery();

// 2. 初始化 useForm —— 不再依赖 <Form> 组件的 initial-values
const { values, resetForm, handleSubmit } = useForm({
  // 可选：定义初始 schema（提升类型安全）
  initialValues: {
    'authData.name': '',
    'authData.email': '',
    'authData.phoneNumber': '',
    'companyData.company.basicInfo.name': '',
    'companyData.company.basicInfo.url': '',
    'companyData.company.basicInfo.contactPhone': '',
  }
});

// 3. 等待异步数据加载完成，再注入初始值
watch(
  () => [authIsLoading.value, companyIsLoading.value],
  ([authLoading, companyLoading]) => {
    if (authLoading || companyLoading) return;

    // ✅ 关键：手动提取嵌套属性，构建扁平化初始值对象
    const initial = {
      'authData.name': authData.value?.name ?? '',
      'authData.email': authData.value?.email ?? '',
      'authData.phoneNumber': authData.value?.phoneNumber ?? '',
      'companyData.company.basicInfo.name': companyData.value?.company?.basicInfo?.name ?? '',
      'companyData.company.basicInfo.url': companyData.value?.company?.basicInfo?.url ?? '',
      'companyData.company.basicInfo.contactPhone': companyData.value?.company?.basicInfo?.contactPhone ?? '',
    };

    resetForm({ values: initial });
  },
  { immediate: true }
);

// 4. 提交处理示例（可选）
const onSubmit = handleSubmit((payload) => {
  console.log('提交数据:', payload);
  // payload 是扁平化对象，如 { 'authData.name': 'John', ... }
  // 如需还原为嵌套结构，可在此处做映射转换
});
</script>

<template>
  <div v-if="companyIsLoading || authIsLoading">Loading please wait...</div>
  <div v-else>
    <!-- 移除 <Form> 包裹，直接使用子组件 -->
    <AdminInfo />
    <q-separator class="q-mt-md" />
    <BasicInfo />
    <q-separator class="q-mt-md" />

    <!-- 提交按钮（可放在任意位置） -->
    <q-btn @click="onSubmit" label="Save Changes" color="primary" />

    <!-- 调试用：实时查看当前 values -->
    <pre class="brush:php;toolbar:false;">{{ JSON.stringify(values, null, 2) }}

⚠️ 注意事项与最佳实践

• 不要依赖 :initial-values + 组件自动同步：该模式仅用于简单扁平表单；嵌套路径需由开发者显式管理。
• 字段名即路径字符串：ZamFormField 中 name="authData.name" 是合法且推荐的写法，VeeValidate 内部会按点号解析嵌套路径，无需额外配置。
• 响应式来源必须明确：authData 和 companyData 是 ref，但它们的 .value 是普通对象（非 reactive），因此 formValues.ref({ authData, companyData }) 不会触发嵌套属性的响应式更新。useForm() 的 values 是独立响应式代理，这才是可靠的数据源。
• 提交前的数据重组：若后端 API 需要嵌套结构（如 { authData: { name: '' }, companyData: { ... } }），请在 handleSubmit 回调中手动映射：

  const onSubmit = handleSubmit((flat) => {
    const payload = {
      authData: {
        name: flat['authData.name'],
        email: flat['authData.email'],
        phoneNumber: flat['authData.phoneNumber'],
      },
      companyData: {
        company: {
          basicInfo: {
            name: flat['companyData.company.basicInfo.name'],
            url: flat['companyData.company.basicInfo.url'],
            contactPhone: flat['companyData.company.basicInfo.contactPhone'],
          }
        }
      }
    };
    // 调用 API...
  });

• 性能提示：若嵌套层级极深或字段极多，可考虑使用 lodash.set / lodash.get 辅助映射，增强可维护性。