vue表单元素改变后调用方法

目前用深度监听表单对象,这时表单元素改变时,可以触发,但每输入一个字符都会触发,如何在一个输入框输完后,或者多选框都选完后再触发呢?

watch: {
    queryForm: {
        handler(val) {
            //todo
        },
        deep:true
    }
},

换种问法,怎么给每个表单元素绑定@change事件?要在每个元素都写@change=''吗?
现在直接监听queryForm时,每个元素输入都会触发,如何改成change后触发?

 <el-form ref="form" :model='queryForm' :inline='true'>
    <el-form-item label='查询类型' prop="queryType">
        <el-select v-model.lazy="queryForm.queryType">
             <el-option value='1' label='按日'></el-option>
         </el-select>
     </el-form-item>
     <el-form-item>
     </el-form-item>
     ...
 </el-form>
 
 
 watch: {
    queryForm: {
        handler(val) {
            //todo
        },
        deep:true
    }
},
阅读 2.7k
1 个回答

v-model.lazy 呗,默认监听的是 input 事件,换成 change 即可


既然修改了问题,那我来提一个问题,如何判断表单填写完成

  1. 最后一个元素填写完成。

    1. 缺点是触发时机、和非正常顺序填写
  2. 失去焦点

    1. 还好一点
  3. 判断所有元素不为空

    1. 可以和上面的做叠加
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题