关于antdesign中formModel提供的resetFields方法不生效问题

先上代码

错误代码

    <a-form-model layout="inline" :model="queryData" @keyup.enter.native="searchQuery" ref="formM">
        <a-row :gutter="24">
          <a-col span="4">
            <a-form-model-item label="地域名称">
              <c-area-select
                placeholder="请选择地域名称"
                :p-code="queryData.province"
                v-model="queryData.city"
                @change="cityChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="名称">
              <a-input placeholder="请输入名称" v-model="queryData.name" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="状态">
              <j-dict-select-tag placeholder="请选择状态" dict-code="data_status" v-model="queryData.status" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <!-- <a-button @click="searchReset" style="marginRight:15px">重置</a-button> -->
            <a-button @click="clearOption" style="marginRight:15px">重置</a-button>
            <a-button @click="searchQuery" type="primary" icon="search">查询</a-button>
          </a-col>
        </a-row>
      </a-form-model>
      
      //methods
 clearOption() {
      this.$refs.formM.resetFields()
      console.log(this.$refs.formM)
      console.log(this.$refs.formM.resetFields)
      }
    }

页面报错信息如下：

此时点击重置button是不会生效的

改正后的代码如下

<a-form-model layout="inline" :model="queryData" @keyup.enter.native="searchQuery" ref="formM">
        <a-row :gutter="24">
          <a-col span="4">
            <a-form-model-item label="地域名称" prop="city">
              <c-area-select
                placeholder="请选择地域名称"
                :p-code="queryData.province"
                v-model="queryData.city"
                @change="cityChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="名称" prop="name">
              <a-input placeholder="请输入名称" v-model="queryData.name" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="状态" prop="status">
              <j-dict-select-tag placeholder="请选择状态" dict-code="data_status" v-model="queryData.status" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <!-- <a-button @click="searchReset" style="marginRight:15px">重置</a-button> -->
            <a-button @click="clearOption" style="marginRight:15px">重置</a-button>
            <a-button @click="searchQuery" type="primary" icon="search">查询</a-button>
          </a-col>
        </a-row>
      </a-form-model>

这个问题困扰了还有一段时间，其实只要仔细看文档就能发现，官方示例的代码中每个item也是加有prop的

由此可见，如果不给formitem加prop这个属性，那么调用方法重置的时候是找不到具体要重置的值是哪个的，总而言之言而总之，多看文档啊西八