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面向对象编程之对象使用分析
Aug 19 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
layui的select联动实现代码
2019/09/28 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python跨文件使用全局变量的实现
2020/11/17 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
班组长的岗位职责
2013/12/09 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
超市商业计划书
2014/05/04 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
丧事主持词
2015/07/02 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
「月刊Action」2022年5月号封面公开
2022/03/21 日漫