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 相关文章推荐
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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自定文件保存session的方法
2014/12/10 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
简单的三步vuex入门
2018/05/20 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
校长寄语大全
2014/04/09 职场文书
安全生产标语
2014/06/06 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
公务员考察材料
2014/12/23 职场文书
通知格式
2015/04/27 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
使用Python开发冰球小游戏
2022/04/30 Python