如何在Vue2中实时监听表单变化

今天就跟大家聊聊有关如何在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>

看完上述内容，你们对如何在Vue2中实时监听表单变化有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。