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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 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
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php文件系统处理方法小结
2016/05/23 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
AngularJS语法详解
2015/01/23 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
Nodejs libuv运行原理详解
2019/08/21 NodeJs
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python装饰器与递归算法详解
2016/02/18 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python微信公众号开发简单流程
2018/03/23 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python获取txt文件词向量过程详解
2019/07/05 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
如何给Python代码进行加密
2020/01/10 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
跟单文员的岗位职责
2013/11/14 职场文书
社会实践感言
2014/01/25 职场文书
档案工作汇报材料
2014/08/21 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers