關於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這個屬性，那么調用方法重置的時候是找不到具體要重置的值是哪個的，總而言之言而總之，多看文檔啊西八