vue监听表单值是否被修改

需求场景：用户在修改了表单内容后请求接口，如果没有修改，则不请求。本次页面级和弹框级分开来说，这里只贴基础代码。

一，弹框级表单：

<!-- 添加或修改对话框 --> 
<el-dialog :title="title" :visible.sync="open"> 
    <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="文件名称"> 
            <el-input v-model="form.fileName" placeholder="文件名称"/> 
        </el-form-item>
        <el-form-item label="文件类型"> 
            <el-input v-model="form.fileType" placeholder="文件类型"/> 
        </el-form-item> 
    </el-form> 
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
    </div> 
</el-dialog>

使用watch深度监听表单

data(){ 
    return{ 
        defaultValue:0,//监听变量值 
        isEdit:false,//判断true的时候则请求接口 
    } 
} 
watch:{ 
    form:{ handler(val,old){ 
            //修改的时候监听该表单，新增不需要 
            if(this.title == "修改"){ 
                //修改了之后改变变量的值 
                this.defaultValue++ //判断如果变量大于1，则说明值有改动 
                if(this.defaultValue>1){ 
                    this.isEdit=true 
                } 
            } 
        }, 
        deep:true //深度监听form里的每个对象 
    } 
}, 
methods:{
    //点击修改按钮操作 
    handleUpdate(row){ 
        //清空变量值 
        this.defaultValue=0; 
        this.isEdit=false; 
        getInfo(row.id).then(res=>{ 
            this.form = response.data 
            this.title = "修改"//注意title一定是在获取完表单值后才赋值，否则监听会出错 
        }) 
    }， 
    submitForm(){ 
        if (this.form.id !== undefined) {
            //isEdit为true的时候请求提交接口，否则不请求 
            if(this.isEdit){ 
            this.$confirm('是否确定保存本次修改内容?', '提示', { 
                    confirmButtonText: '确定', 
                    cancelButtonText: '取消', 
                    type: 'warning' 
                }).then(async () => {
                    //提交接口 
                    updateSchool(this.form).then(() => { 
                        this.msgSuccess("修改成功") 
                        this.open = false 
                        this.getList() 
                    }).catch(() => {
                        this.submitLoading = false 
                    }) 
                }) 
            }else{
                this.open = false
            } 
        } 
    } 
}

二，页面级表单：

页面级表单跟弹框级表单唯一不同的就是刚进页面获取id，但是在watch监听的时候万万不可用id 去判断，因为id在页面初始化的时候就获取到，此时表单的值还没渲染，所以同样的要在获取完form值之后给变量赋值，用这个变量再去监听的时候判断。其他就跟弹框级大同小异了。