关于前端:关于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这个属性，那么调用办法重置的时候是找不到具体要重置的值是哪个的，总而言之言而总之，多看文档啊西八