Vue2实时监听表单变化的示例讲解

<template>
 <section>
 <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :before-close="cancel">
 <el-form :model="form" :rules="rules" ref="form">
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button size="medium" type="primary" @click="addSubmit" :loading="addLoading" :disabled="unChange">确 定</el-button>
 </div>
 </el-dialog>
 </section>
</template>

<script> 
 export default {
 props: ["dialogFormVisible","form","formTitle"],
 data() {
 return {
 unChange: true,
 preForm: JSON.parse(JSON.stringify(this.form)) //深拷贝对象
 };
 },
 watch: {
 form:{
 handler:function(nowVal,oldVal){
 var $this = this;
 for(let i in $this.form){
 if(nowVal[i] != $this.preForm[i]) {
 $this.unChange = false;
 break;
 }else {
 $this.unChange = true;
 }
 }
 },
 deep:true
 }
 },
 methods: {
 addSubmit() {
 var $this = this;
 }
 },
 mounted() {
 var $this = this;
 }
 };
</script>