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


Posted in Javascript onAugust 30, 2018

如下所示:

<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实时监听表单变化的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
vue-swiper的使用教程
Aug 30 #Javascript
分享vue里swiper的一些坑
Aug 30 #Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 #Javascript
小程序图片长按识别功能的实现方法
Aug 30 #Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 #Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 #Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 #Javascript
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
小程序云开发实战小结
2018/10/25 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
python简单贪吃蛇开发
2019/01/28 Python
Python for循环及基础用法详解
2019/11/08 Python
python 求定积分和不定积分示例
2019/11/20 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
交通事故协议书
2014/04/15 职场文书
家长对老师的评语
2014/04/18 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2014年维修工作总结
2014/11/22 职场文书
建议书范文
2015/02/05 职场文书
家长反馈意见及建议
2015/06/03 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Linux中文件的基本属性介绍
2022/06/01 Servers