Vue.js 3 如何向服务器发送包含嵌套city对象的Student数据

你遇到的报错本质是：在组件的响应式数据初始化阶段，完全没有声明接口要求的嵌套city对象，直接在提交逻辑里访问this.city.postalCode时，this.city本身是undefined，自然会触发「Cannot read property 'postalCode' of undefined」的错误。
之前把postalCode、name定义在data顶层的平铺写法，本身就和后端要求的Student实体嵌套结构不匹配。

要完全按照Postman里测试通过的请求体层级，在data里把所有嵌套字段提前初始化，保证每一层嵌套对象都存在，不存在未定义的空引用。

选项式API写法（Vue3兼容写法） #

export default {
  data() {
    return {
      // 和接口结构完全对齐的嵌套表单对象
      studentForm: {
        name: '', // 学生姓名对应外层字段
        city: {
          // city对象必须提前完整初始化，不能漏
          name: '',
          postalCode: ''
        }
      }
    }
  }
}

<script setup> 组合式API写法（Vue3常用写法） #

import { reactive } from 'vue'
// 用reactive直接定义完整的嵌套结构
const studentForm = reactive({
  name: '',
  city: {
    name: '',
    postalCode: ''
  }
})

之前绑定平铺字段的v-model要改成对应嵌套路径，不能直接绑定顶层的独立字段：

• 学生姓名输入框：v-model="studentForm.name"
• 城市名称输入框：v-model="studentForm.city.name"
• 城市邮编输入框：v-model="studentForm.city.postalCode"

注意：不要把嵌套字段单独提取到data顶层做平铺绑定，否则最终提交的结构会和接口要求不一致

不需要手动拆分拼接字段，直接把提前定义好的嵌套studentForm对象作为请求体传给接口即可，结构和Postman测试时完全一致：

// 提交方法示例
async handleSubmit() {
  try {
    // 直接传整个嵌套对象，结构和Postman测试的JSON完全匹配
    await axios.post('/api/student', this.studentForm)
    // 提交成功后的提示、跳转逻辑
  } catch (err) {
    // 错误处理逻辑
  }
}

• 所有嵌套层级的对象必须在初始化阶段就声明完整，不能等到提交时才临时给this.city赋值，否则不仅会触发undefined报错，还会丢失Vue的响应式追踪
• 最终提交的字段层级、字段名要和Postman里的请求体1:1对应，少一层嵌套、改一个字段名都会导致后端解析失败

之前触发报错的错误代码参考：

// 错误的旧代码
data() {
  return {
    name: '',
    postalCode: '' // 平铺定义字段，没有city嵌套对象
  }
},
methods: {
  submit() {
    const payload = {
      name: this.name,
      city: {
        // this.city根本不存在，是undefined，直接触发报错
        name: this.city.name,
        postalCode: this.city.postalCode
      }
    }
  }
}

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