Vue3试用elementPlus的form表单读取不到深层嵌套属性

问题描述：form使用报错：

GeneratePolicy.vue:68 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'port')

伪代码如下：

<template>
  <div>
    <el-drawer
      v-model="dialogVisible"
    >
      <div class="dialog-container">
        <el-form ref="formRef" 
          :model="form" 
          :rules="rules" 
          label-width="100px" 
          :hide-required-asterisk="true" 
          style="width: 100%">
  
          <el-form-item v-if="form.serviceInfo.type===2" label="端口" prop="serviceInfo.port">
            <el-input v-model="form.serviceInfo.port" size="small" clearable class="select-input-width" placeholder="请输入端口或端口范围。例如443或8001-8100" />
          </el-form-item>
          <el-form-item v-if="form.serviceInfo.type===2" label="协议" prop="serviceInfo.protocol">
            <el-select v-model="form.serviceInfo.protocol" size="small" placeholder="请选择" class="select-input-width">
              <el-option label="TCP" value="TCP" />
              <el-option label="UDP" value="UDP" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button class="dialog-footer-button" size="small" style="right: 100px;" @click="dialogVisible = false">取消</el-button>
        <el-button class="dialog-footer-button" size="small" style="right: 20px;" type="primary" :loading="btnLoading" @click="submitService">确定</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'

let form = reactive({
  name: '',
  status: 1, // 0: 关闭， 1：开启
  type: 0, // 白名单：0， 1：黑名单
  from: 1, // 1：自学习生成， 0： 后台配置
  policyGroupId: '',
  serviceInfo: {
    id: '', // 提交时放到数组中
    type: 2, // 1: 选择服务对象；2：自定义
    info: [], // 自定义格式： ["80;tcp","11-22;tcp"]
    port: '', // 服务自定义参数，提交时不提交该字段，需拼接到 serviceInfo.info 字段
    protocol: '' // 服务自定义参数，提交时不提交该字段，需拼接到 serviceInfo.info 字段
  },
  callees: {
    workLoadId: [],
    groupId: [],
    ip: '',
    ipType: 2,
    roleId: []
  },
  callers: {
    workLoadId: [],
    groupId: [],
    ip: '',
    ipType: 2,
    roleId: []
  },
  remark: undefined // 黑名单描述字段
});


function resetService() {
  isDelDisabled.value = false;
  
  calleeRadio.value = 1;
  callerRadio.value = 1;

  form.name = '';
  form.status = 1;
  form.type = 0;
  form.from = 1;

  form.serviceInfo.id = '';
  form.serviceInfo.type = 2;
  form.serviceInfo.info = [];
  form.serviceInfo.port = '';
  form.serviceInfo.protocol = '';

  form.callees.workLoadId = [];
  form.callees.groupId = [];
  form.callees.ip = '';
  form.callees.roleId = [];

  form.callers.workLoadId = [];
  form.callers.groupId = [];
  form.callers.ip = '';
  form.callers.roleId = [];

}

defineExpose({
  openDialog
})
</script>

将form改成ruleForm成功解决:

<template>
  <div>
    <el-drawer
      v-model="dialogVisible"
    >
      <div class="dialog-container">
        <el-form ref="formRef" 
          :model="ruleForm" 
          :rules="rules" 
          label-width="100px" 
          :hide-required-asterisk="true" 
          style="width: 100%">
  
          <el-form-item v-if="ruleForm.serviceInfo.type===2" label="端口" prop="serviceInfo.port">
            <el-input v-model="ruleForm.serviceInfo.port" size="small" clearable class="select-input-width" placeholder="请输入端口或端口范围。例如443或8001-8100" />
          </el-form-item>
          <el-form-item v-if="ruleForm.serviceInfo.type===2" label="协议" prop="serviceInfo.protocol">
            <el-select v-model="ruleForm.serviceInfo.protocol" size="small" placeholder="请选择" class="select-input-width">
              <el-option label="TCP" value="TCP" />
              <el-option label="UDP" value="UDP" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button class="dialog-footer-button" size="small" style="right: 100px;" @click="dialogVisible = false">取消</el-button>
        <el-button class="dialog-footer-button" size="small" style="right: 20px;" type="primary" :loading="btnLoading" @click="submitService">确定</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'

let ruleForm = reactive({
  name: '',
  status: 1, // 0: 关闭， 1：开启
  type: 0, // 白名单：0， 1：黑名单
  from: 1, // 1：自学习生成， 0： 后台配置
  policyGroupId: '',
  serviceInfo: {
    id: '', // 提交时放到数组中
    type: 2, // 1: 选择服务对象；2：自定义
    info: [], // 自定义格式： ["80;tcp","11-22;tcp"]
    port: '', // 服务自定义参数，提交时不提交该字段，需拼接到 serviceInfo.info 字段
    protocol: '' // 服务自定义参数，提交时不提交该字段，需拼接到 serviceInfo.info 字段
  },
  callees: {
    workLoadId: [],
    groupId: [],
    ip: '',
    ipType: 2,
    roleId: []
  },
  callers: {
    workLoadId: [],
    groupId: [],
    ip: '',
    ipType: 2,
    roleId: []
  },
  remark: undefined // 黑名单描述字段
});


function resetService() {
  isDelDisabled.value = false;
  
  calleeRadio.value = 1;
  callerRadio.value = 1;

  ruleForm.name = '';
  ruleForm.status = 1;
  ruleForm.type = 0;
  ruleForm.from = 1;

  ruleForm.serviceInfo.id = '';
  ruleForm.serviceInfo.type = 2;
  ruleForm.serviceInfo.info = [];
  ruleForm.serviceInfo.port = '';
  ruleForm.serviceInfo.protocol = '';

  ruleForm.callees.workLoadId = [];
  ruleForm.callees.groupId = [];
  ruleForm.callees.ip = '';
  ruleForm.callees.roleId = [];

  ruleForm.callers.workLoadId = [];
  ruleForm.callers.groupId = [];
  ruleForm.callers.ip = '';
  ruleForm.callers.roleId = [];

}

defineExpose({
  openDialog
})
</script>