当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue2实时监听表单变化的示例讲解

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

2018年09月23日  | 移动技术网IT编程  | 我要评论

如下所示：

<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实时监听表单变化的示例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网