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

Question

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

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
    }
},

Answer 1

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

---

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

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

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

2. 失去焦点

   1. 还好一点

3. 判断所有元素不为空

   1. 可以和上面的做叠加