element-ui和vue表單(對話框)驗(yàn)證提示語(殘留)清除操作
問題是這樣的:
如果一個頁面有多個按鈕打開相同的element-ui的Dialog對話框,那么如果第一個點(diǎn)擊"順序"按鈕出現(xiàn)紅色驗(yàn)證提示語后, 再點(diǎn)擊“取消”,或者點(diǎn)擊頁面空白處此對話框消失,而后再點(diǎn)擊同一個“順序”按鈕亦或別的“順序”按鈕, 那么此紅色提示依然存在,顯然是無法忍受的,那么怎么去除呢,
這里也用到一個vue的一個語法watch,從字面意思上理解就是起到監(jiān)控的作用,監(jiān)控這個diaLog對話框的打開和關(guān)閉。
在 “ 代碼一 ” vue中的data前面加上watch來監(jiān)控對話框,對于function中的val,oldVla兩個參數(shù)不必過多糾結(jié),只要任意一個變量都可以,只是起到打開和關(guān)閉的暫存而已(個人理解)
在 “ 代碼二 ” element-ui中定義一個 ref="form" 起到參照的作用(reference),watch中的form與此相對應(yīng),resetFields取自element-ui官網(wǎng)上的Form表單里的方法名, 看 “ 圖二 ”官網(wǎng)截圖
代碼一、
let result = Vue.extend({ name: 'recommend-list', template: template, watch: { dialogSequenceVisible: function (val,oldVla) { this.$refs["form"].resetFields(); } }, data() { let validateSequence = (rule, value, callback) => { let val = this.trim(value); if (val == '') { callback(new Error('順序值不允許為空')); } else if (value > 9223372036854775807) { callback(new Error('順序值不能超過9223372036854775807')); } else if (!this.isNumber(val)) { callback(new Error('必須輸入正整數(shù)'));
代碼二、
<el-dialog title="調(diào)整順序" :visible.sync="dialogSequenceVisible" style="width:80%" @close='closeDialog'> <el-form label-width="200px" :model="form" style="margin:0 auto;" :rules="rules" ref="form"> <el-form-item label="請輸入調(diào)整的順序值:" prop="sequence"> <el-input v-model="form.sequence" style="width:200px" auto-complete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogSequenceVisible = false">取 消</el-button> <el-button type="primary" @click="position()">確 定</el-button> </div> </el-dialog>
圖二、
但是,這樣會頁面調(diào)試模式會報錯 “ Cannot read property 'resetFields' of undefined ” 錯誤, 應(yīng)該是第一次彈出dialog對話框的時候沒有弄到DOM里, 需要修改vue中的watch代碼, 做個限定. 這樣不但可以清除提示語, 還可以清空輸入框里內(nèi)容殘留, 如下:
let result = Vue.extend({ name: 'recommend-list', template: template, watch: { dialogSequenceVisible: function (val,oldVla) { if (this.$refs['form'] != undefined) { this.$refs["form"].resetFields(); } } },
補(bǔ)充知識:elementUI vue 編輯中的input的驗(yàn)證殘留清除
當(dāng)使用編輯的時候, 假如上次的驗(yàn)證沒通過, 報紅了, 下次再點(diǎn)擊編輯的時候還會報紅,因此要清除驗(yàn)證殘留, 方式有兩種:
this.$refs["from"].resetFields(); //移除校驗(yàn)結(jié)果并重置字段值
this.$refs["from"].clearValidate(); //移除校驗(yàn)結(jié)果
以上這篇element-ui和vue表單(對話框)驗(yàn)證提示語(殘留)清除操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3學(xué)習(xí)之語法糖、箭頭函數(shù)、函數(shù)聲明詳解
在Vue3中箭頭函數(shù)被廣泛支持,尤其是在組合式API的上下文中,這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)之語法糖、箭頭函數(shù)、函數(shù)聲明的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù)
有些傳遞的參數(shù)是直接拼接到URL地址欄中的、但是為了統(tǒng)一管理、不能將傳遞的參數(shù)直接拼接到地址欄中,接下來通過本文給大家介紹Vue中傳遞自定義參數(shù)到后端、后端獲取數(shù)據(jù)并使用Map接收參數(shù),感興趣的朋友一起看看吧2022-10-10elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開發(fā)時,讓我解決一個elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06解決vue語法會有延遲加載顯現(xiàn){{xxx}}的問題
今天小編就為大家分享一篇解決vue語法會有延遲加載顯現(xiàn){{xxx}}的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11