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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
javascript冒泡排序小结
Apr 10 Javascript
bootstrap table实例详解
Jan 06 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
js如何验证密码强度
Mar 18 Javascript
jquery实现抽奖功能
Oct 22 jQuery
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
php读取excel文件的简单实例
2013/08/26 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Python线程指南详细介绍
2017/01/05 Python
python日志记录模块实例及改进
2017/02/12 Python
python通过链接抓取网站详解
2019/11/20 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
2014年创卫实施方案
2014/02/18 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
奠基仪式致辞
2015/07/30 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server