如何在预填充Vuetify表单中使用嵌套对象

问题1：setup里用await声明reactive变量触发错误 #

别在setup顶层直接用await声明变量，这会强制要求组件被包裹。不想用Suspense的话，把异步获取数据的逻辑放到onMounted钩子里，先初始化空的reactive对象，拿到数据后用Object.assign覆盖：

import { reactive, onMounted } from 'vue';
import { useReviewStore } from '@/stores/review';

export default {
  setup() {
    const reviewStore = useReviewStore();
    // 先初始化空结构，类型指定为你的CertificationReview或null
    const currentReview = reactive<CertificationReview | null>(null);

    onMounted(async () => {
      const fetchedReview = await reviewStore.getReview();
      // 把获取到的数据合并进reactive对象
      Object.assign(currentReview, fetchedReview);
    });

    return { currentReview };
  }
};

要是愿意用Suspense，就在父组件里把你的表单组件包起来：

<Suspense>
  <template #default>
    <YourFormComponent />
  </template>
  <template #fallback>
    <v-progress-circular indeterminate />
  </template>
</Suspense>

问题2：加载/切换页面时对象为null，访问嵌套属性报错 #

两种简单解法：

解法1：模板里用可选链+空值合并 #

直接在v-model或属性里加?.，避免null时访问属性报错：

<v-autocomplete
  v-model="currentReview?.state_details?.program_id"
  :items="programOptions"
  label="Program"
/>

解法2：初始化完整的空对象结构 #

别让currentReview一开始是null，直接给它初始化一个符合类型的空结构，确保嵌套层级都存在：

const currentReview = reactive<CertificationReview>({
  state_details: {
    program_details: {} as ProgramDetails,
    // 其他必填字段都设为空值或默认值
  },
  // 顶层其他字段也初始化好
});

onMounted(async () => {
  const fetched = await reviewStore.getReview();
  Object.assign(currentReview, fetched);
});

还可以在嵌套表单区域加v-if守卫，确保对象存在再渲染：

<template v-if="currentReview?.state_details">
  <v-autocomplete
    v-model="currentReview.state_details.program_details.id"
    :items="programs"
  />
</template>

问题3：嵌套对象依赖父节点选择，表单联动逻辑实现 #

用watch监听父级字段的变化，动态更新子级的选项或重置子级数据就行，举个例子：

import { watch } from 'vue';

// 监听state_id的变化，联动更新program相关数据
watch(
  () => currentReview.state_id,
  async (newStateId) => {
    if (newStateId) {
      // 根据选中的state去拉对应的program列表
      currentReview.state_details.program_options = await api.getProgramsByState(newStateId);
      // 重置program的选中值，避免旧数据残留
      currentReview.state_details.program_details = {} as ProgramDetails;
    } else {
      // 没选state的话，清空选项和子级数据
      currentReview.state_details.program_options = [];
      currentReview.state_details.program_details = null;
    }
  },
  { immediate: true } // 组件刚加载时也执行一次，确保初始状态正确
);

模板里子组件绑定对应的选项：

<v-autocomplete
  v-model="currentReview.state_id"
  :items="stateOptions"
  label="State"
/>

<v-autocomplete
  v-if="currentReview.state_details.program_options.length"
  v-model="currentReview.state_details.program_details.id"
  :items="currentReview.state_details.program_options"
  label="Program"
/>

要是联动逻辑太复杂，把嵌套的表单部分拆成子组件，通过props传父级数据，用emit事件更新父组件的模型，逻辑会更清晰。

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