你遇到的问题核心很明确：组件初始化时，父组件的异步API请求还未完成，item props是空对象，导致data里的form.id初始化时拿到的是undefined。因为Vue的data只会在组件实例创建时执行一次初始化，之后props更新不会自动同步到form对象里。下面给你几个实用的解决方案：

方案一：使用watch监听Props变化，动态更新表单 #

这是最灵活的方案，能实时响应item或submitType的变化，适合需要在组件生命周期中多次切换新增/更新状态的场景。修改你的表单组件代码如下：

<template>
  <p v-if="submitType === 'update' && item.id">{{ item.id }}</p>
  <div v-if="submitType === 'insert' || (submitType === 'update' && item.id )">
    <section>
      <form @submit.prevent="onSubmit">
        <div>
          <label for="id">ID</label>
          <input id="id" name="id" v-model="form.id" type="number" placeholder="ID">
        </div>
        <input type="submit" value="Save">
      </form>
    </section>
  </div>
</template>
<script>
export default {
  name: 'Form',
  props: {
    item: {
      type: Object,
      default: () => ({}) // 给个默认空对象避免报错
    },
    submitType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        id: 0 // 先初始化默认值
      }
    }
  },
  watch: {
    // 监听item变化，immediate确保组件初始化时就执行一次
    item: {
      immediate: true,
      handler(newItem) {
        if (this.submitType === 'update' && newItem.id) {
          this.form.id = newItem.id;
        }
      }
    },
    // 监听submitType切换，切换时重置或更新表单
    submitType(newType) {
      if (newType === 'insert') {
        this.form.id = 0;
      } else if (newType === 'update' && this.item.id) {
        this.form.id = this.item.id;
      }
    }
  }
}
</script>

方案二：延迟渲染表单组件，确保Props已加载完成 #

如果你的更新页面不需要动态切换状态，只需要初始化一次表单，可以在父组件中用v-if延迟渲染Form组件，直到item数据加载完成。这样组件创建时item已经有值，data初始化就能直接拿到正确的id：

父组件（详情页）修改： #

<template>
  <!-- 只有当item.id存在时才渲染表单 -->
  <Form v-if="item.id" :item="item" submit-type="update"></Form>
</template>
<script>
export default {
  data() {
    return {
      item: {}
    }
  },
  created() {
    callAPI(this.$route.params.id).then( response => this.item = response.data )
  }
}
</script>

表单组件的data部分可以保持你原来的写法： #

data() {
  return {
    form: {
      id: this.submitType === 'update' ? this.item.id : 0,
    }
  }
},

方案三：使用计算属性配合可写setter（可选） #

如果希望form完全依赖props，也可以用带setter的计算属性，不过这种方式更适合表单字段完全和props同步的场景：

computed: {
  form: {
    get() {
      return {
        id: this.submitType === 'update' && this.item.id ? this.item.id : 0
      }
    },
    set(newForm) {
      // 这里可以处理表单修改后的逻辑，比如同步到父组件
      // 不过如果只是本地修改，可能watch更简单
    }
  }
}

推荐优先用方案一或方案二，根据你的业务场景选择：如果需要动态切换新增/更新状态，选方案一；如果只是更新页面一次性初始化，选方案二更简洁。

内容的提问来源于stack exchange，提问作者Petr Bělecký