欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決

 更新時(shí)間:2020年09月11日 12:44:20   作者:TVM  
這篇文章主要介紹了基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

不刷新頁(yè)面重新打開(kāi)el-dialog時(shí),如果我們綁定了rules或者某個(gè)值需要required,它總會(huì)自動(dòng)校驗(yàn)。

查看了多個(gè)博文,發(fā)現(xiàn)常用的有兩種解決方法(下列方法都可以在其他博文查看,不再細(xì)寫(xiě),如有需要請(qǐng)自行查詢):

1.給dialog套上v-if ;

2.在關(guān)閉dialog時(shí),監(jiān)聽(tīng)關(guān)閉回調(diào),清除校驗(yàn)。

我在自己的項(xiàng)目里使用了上述兩種方法,都不太好用,自己琢磨出了另一種方法:

<el-dialog @open="openDialog()">

</el-dialog>

調(diào)用dialog打開(kāi)的回調(diào)

methods:
 
openDialog(){
  this.$nextTick(() => {
    this.$refs.dataForm.clearValidate();
  })
}

初始化dialog時(shí), 拿到變化后的dom, 進(jìn)行清除校驗(yàn)

補(bǔ)充知識(shí):Cannot read property 'resetFields' of undefined 問(wèn)題及引申

問(wèn)題描述: 使用element開(kāi)發(fā)我的后臺(tái)系統(tǒng),編輯和新增使用了同一個(gè)彈出框<el-dialog><el-form></el-form></el-dialog>

綁定了數(shù)據(jù)data里的commentForm對(duì)象

為了在新增彈出框清空表單, 使用了this.$refs[formName].resetFields()

每次第一次點(diǎn)擊新增顯示彈出框,都會(huì)報(bào)錯(cuò)

"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

問(wèn)題原因:

mouted加載table數(shù)據(jù)以后,隱藏的彈出框并沒(méi)有編譯渲染進(jìn)dom里面。

所以@click="dialogFormVisible = true;resetForm('dlgForm')"click彈出的時(shí)候$refs并沒(méi)有獲取到dom元素導(dǎo)致 'resetFields' of undefined

解決方法:

1、($nextTick dom下一次更新之后)

      resetForm(formName) {
        this.$nextTick(()=>{
          this.$refs[formName].resetFields();
        })        
      },

2、(如果是第一次就點(diǎn)擊新增就沒(méi)必要reset, 根據(jù)元素undefined判斷)

        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }

注意事項(xiàng):對(duì)DOM一系列的js操作最好都要放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中

以上這篇基于element-ui對(duì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vite使用Esbuild提升性能詳解

    Vite使用Esbuild提升性能詳解

    這篇文章主要為大家介紹了Vite使用Esbuild提升性能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • Vue中component標(biāo)簽解決項(xiàng)目組件化操作

    Vue中component標(biāo)簽解決項(xiàng)目組件化操作

    這篇文章主要介紹了Vue中component標(biāo)簽解決項(xiàng)目組件化操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)

    vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)

    這篇文章主要介紹了vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • Vue使用vue-cli創(chuàng)建項(xiàng)目

    Vue使用vue-cli創(chuàng)建項(xiàng)目

    這篇文章主要介紹了Vue使用vue-cli創(chuàng)建項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決

    vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決

    這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue3中Vuex的詳細(xì)使用方法

    Vue3中Vuex的詳細(xì)使用方法

    在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vuex詳細(xì)使用的相關(guān)資料,需要的朋友可以參考下
    2022-07-07
  • 解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)

    解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)

    這篇文章主要為大家介紹了解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • vue項(xiàng)目配置eslint保存自動(dòng)格式化問(wèn)題

    vue項(xiàng)目配置eslint保存自動(dòng)格式化問(wèn)題

    這篇文章主要介紹了vue項(xiàng)目配置eslint保存自動(dòng)格式化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法

    Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法

    本文將介紹基于 Vue 框架和 compressor.js 的上傳時(shí)文件壓縮實(shí)現(xiàn)方法,通過(guò)在上傳過(guò)程中對(duì)文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗(yàn),感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • Vue通過(guò)WebSocket建立長(zhǎng)連接的實(shí)現(xiàn)代碼

    Vue通過(guò)WebSocket建立長(zhǎng)連接的實(shí)現(xiàn)代碼

    這篇文章主要介紹了Vue通過(guò)WebSocket建立長(zhǎng)連接的實(shí)現(xiàn)代碼,文中給出了問(wèn)題及解決方案,需要的朋友可以參考下
    2019-11-11

最新評(píng)論