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 相关文章推荐
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
json跟xml的对比分析
2008/06/10 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
HTML的select控件美化
2017/03/27 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python何时应该使用Lambda函数
2019/07/02 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
如何做好总经理助理
2013/11/12 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
社团活动总结
2014/04/28 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
公司2015年终工作总结
2015/05/26 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
MySQL 十大常用字符串函数详解
2021/06/30 MySQL