antd modal弹窗中引入form表单组件 input输入无效

原因： resetFields() 表单重置方法会把form表单下v-modal绑定的值过滤一次，如果发现undefined的值，则会清空绑定，所以导致无法双向绑定输入无效。

解决：

        1、 把undefined值设为空字符串

        2、 把赋值和resetFields()方法都放入nextTick

建议：

        1、modal弹窗的form表单resetFields()放进nextTick中，等待弹窗打开后才清空重置，否则弹窗未打开则表单重置，会报错，找不到表单，也就是refs找不到对应的值

<template>
    <div>
        <a-button type="primary" @click="handleUpdate">打开弹窗</a-button>

        <a-modal 
          title="新增" 
          v-model="isModal"
        >
          <a-form-model
            ref="ruleForm"
            :model="formItem"
            :rules="{
              name: [
                { required: true, message: `请填写名称`}
              ]
            }"
            :label-col="{span: 3}" :wrapper-col="{span: 20}"
            style="min-height: 140px;"
          >
            <a-form-model-item label="名称" prop="name">
              <a-input
                v-model="formItem.name"
                :placeholder="`请输入名称`"
              />
            </a-form-model-item>
          </a-form-model>
      
        </a-modal>
    </div>

    
</template>
<script>
    export default {
        data() {
            return {
              isModal: false,     // 控制 弹窗开关
              formItem: {         // 弹窗表单项
                name: ''
              }       
            }
        },
        methods: {
            handleUpdate () {
              this.isModal = true
      
              // 移除表单验证错误，赋值数据
              this.$nextTick(() => {
                  this.formItem = {name: ''}  // 放nextTick外面可以，但是需要设置值为''
                  this.$refs.ruleForm.resetFields()
              })
           }
        }
    }
</script>