Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解
更新時(shí)間：2018年08月30日 14:24:45 作者：xdhc304
今天小編就為大家分享一篇Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
<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)) //深拷貝對(duì)象
};
},
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實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)單的vue-resourse獲取json并應(yīng)用到模板示例
本篇文章主要介紹了簡(jiǎn)單的vue-resourse獲取json并應(yīng)用到模板示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-02-02
vue2.x中monaco-editor的使用說(shuō)明
這篇文章主要介紹了vue2.x中monaco-editor的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3?echarts組件化及使用hook進(jìn)行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進(jìn)行resize方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue對(duì)象的深度克隆方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue+webpack項(xiàng)目配置便于維護(hù)的目錄結(jié)構(gòu)教程詳解
新建項(xiàng)目的時(shí)候創(chuàng)建合理的目錄結(jié)構(gòu)便于后期的維護(hù)是很重要。這篇文章主要介紹了Vue+webpack項(xiàng)目配置便于維護(hù)的目錄結(jié)構(gòu) ,需要的朋友可以參考下2018-10-10
Vue3前端與Python(Django)后端接口簡(jiǎn)單代碼示例
這篇文章主要介紹了如何使用Django創(chuàng)建項(xiàng)目和應(yīng)用,配置跨域訪(fǎng)問(wèn),并編寫(xiě)視圖和API,同時(shí)還講述了如何使用Vue3創(chuàng)建項(xiàng)目,編寫(xiě)組件調(diào)用后端API,需要的朋友可以參考下2025-01-01
vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫(xiě)說(shuō)明
這篇文章主要介紹了vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫(xiě)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Spring boot 和Vue開(kāi)發(fā)中CORS跨域問(wèn)題解決
這篇文章主要介紹了Spring boot 和Vue開(kāi)發(fā)中CORS跨域問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue 封裝面包屑組件教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue 實(shí)現(xiàn)模糊檢索并根據(jù)其他字符的首字母順序排列
這篇文章主要介紹了vue 實(shí)現(xiàn)模糊檢索，并根據(jù)其他字符的首字母順序排列,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09