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>