Vue小记3

最近写 Vue 项目遇到个错误❌，经过查询研究发现错误所在，现记录如下，如有不对之处请大佬们指教！

期望:在数据列表页中点击“新增”按钮，弹出数据表单页。

问题描述:
操作过程中，点击“新增”按钮，表单页不弹出，页面无反应。

代码前段如下:

 <a-spin :spinning="loading">
      <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
              <a-form-model ref="form" :model="model">
                        <a-form-item  label="姓名" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"          >
                                    <a-input v-model="model.F_Name" />
                         </a-form-item>
               </a-form-model>
         </a-card>
</a-spin>

 data() {    
   return {
           labelCol: {
                         xs: { span: 24 }, 
                         sm: { span: 5 },
                       },                                                           wrapperCol: {                                                                                 xs: { span: 24 },                                                                                    sm: { span: 12 },                                                                                                  },                                                                                                      buttonCol: {                                                                                                                    wrapperCol: {                                                                                                                      xs: { span: 24 },                                                                                                                                       sm: { span: 12, offset: 5 },                                                                                                                                               },                                                                                                                                                        },                                                                                                                                                                 visible: false,                                                                                                                                                                    loading: false,                                                                                                                                                                       model: {},                                                                                                                                                                               form: this.$form.createForm(this),                                                                                                                                                                                    }                                                                                                                                                                                   },                                                                                                                                                                              methods: {                                                                                                                                                                                          init() {                                                                                                                                                                                    this.visible = true                                                                                                                                                                                                  },                                                                                                                                                                                           openForm(model) {                                                                                                                                                                                          this.init()                                                                                                                                                                                             this.model = model                                                                                                                                                                                              },                                                                                                                                                                                        }

错误信息如图所示:

后经过仔细查看发现问题所在，新增数据时 model 为空，应先判断model是否为空后再给界面model赋值，故修改代码如下:

 openForm(model) {
      this.init()
      this.model = model==undefined ? { } : model
 },

注：Vue 小白😊，如有错误之处，请大佬及时指正！！！