zoukankan      html  css  js  c++  java
  • 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!

  • 相关阅读:
    4. 单向循环链表
    3. 单向链表
    2. 队列的实现
    1. 时间复杂度(大O表示法)以及使用python实现栈
    Ubuntu16.04LTS安装集成开发工具IDE: CodeBlocks 和Eclipse-cdt
    Ubuntu16.04搭建各种开发环境的IDE: QT5 , CodeBlocks ,eclipse-cdt, PyCharm
    python2和python3 分别连接MySQL的代码
    面向对象基础
    文件的处理
    离散表(哈希表),深浅拷贝
  • 原文地址:https://www.cnblogs.com/jardeng/p/12877495.html
Copyright © 2011-2022 走看看