Ant Design Vue使用支持v-model效驗的FormModel表單遇到的一個坑

按照官網上用法寫好表單后，在a-select上綁定了change事件

<a-form-model-item label="類型" prop="config.type">
  <a-select v-model="form.config.type" placeholder="請選擇數據庫類型" @change="handleChange">
    <!-- <a-select-option value="">請選擇</a-select-option> -->
    <a-select-option value="0">MySQL</a-select-option>
    <a-select-option value="1">SQL Server</a-select-option>
  </a-select>
</a-form-model-item>

結果下拉框選擇不了了，F12查看控制台，報錯了：TypeError: originalEvents.change.apply is not a function

 

 

源頭是FormItem.js，change.apply是未定義

 

 

折騰許久，最后發現官網FormModel文檔的API處有提醒注意

 

 

意思就是From.Item把input、select等表單項的blur、change事件劫持了，用來做自動效驗，如果我們要給input、select寫blur、change怎么辦呢？

按照官網的寫法做，但是要注意幾個點：

1、要給a-form-model-item設置一個ref引用名稱。

2、autoLink要設置成false，表示是否自動關聯表單域，對於大部分情況都可以使用自動關聯，如果不滿足自動關聯的條件，可以手動關聯。

3、定義change事件，最后寫上：this.$refs.dbType.onFieldChange()，用於表單的自動效驗。

handleChange (value) {
  console.log(value)
　// TODO
  this.$refs.dbType.onFieldChange()
}

最后完整的代碼：

<a-form-model-item label="類型" ref="dbType" prop="config.type" :autoLink="true">
  <a-select v-model="form.config.type" placeholder="請選擇數據庫類型" @change="handleChange">
    <!-- <a-select-option value="">請選擇</a-select-option> -->
    <a-select-option value="0">MySQL</a-select-option>
    <a-select-option value="1">SQL Server</a-select-option>
  </a-select>
</a-form-model-item>

handleChange (value) {
  console.log(value)
  // TODO
  this.$refs.dbType.onFieldChange()
}

 

Over!