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

Vue升級帶來的elementui沖突警告:Invalid prop: custom validator check failed for prop “type“.的解決方案

 更新時間:2025年04月08日 11:10:36   作者:watermelo37  
在頁面渲染的時候,控制臺彈出大量警告,嚴重影響控制臺的信息獲取功能,但是頁面基本能正常顯示,這是因為Vue升級帶來的elementui沖突警告: Invalid prop: custom validator check failed for prop “type“.的解決方案,本文給大家介紹了詳細的解決方案

一、錯誤情景描述

1、報錯情景和信息

在頁面渲染的時候,控制臺彈出大量警告,嚴重影響控制臺的信息獲取功能,但是頁面基本能正常顯示。

警告內(nèi)容有兩種:

①:

Invalid prop: custom validator check failed for prop "type". 

②:

Invalid prop: validation failed for prop "type". Expected one of ["success", "info", "warning", "danger", ""], got value "primary". 

2、解決方案

直面問題,這個警告就是說類型驗證失敗,類型應(yīng)該是"success", "info", "warning", "danger", ""的其中之一,但是實際獲取的類型是“primary”。

再加上警告第三行說明了是tag標簽的type不對,更有助于定位錯誤位置。

那就找到對應(yīng)的位置,將tag類型修改為上述五種之一即可。

            <el-form-item label="Status: ">
              <el-tag
                :type="
                  getStatus(instance.status) == 'initialized' ||
                  getStatus(instance.status) == 'started'
                    ? ''
                    : getStatus(instance.status)
                "
                disable-transitions
              >
                {{ getStatus(instance.status) }}
              </el-tag>
            </el-form-item>

二、深度思考——為什么會警告?為什么頁面能顯示? 

首先,我是在當前項目中整合了以前寫的內(nèi)容,原則上不應(yīng)該會有錯誤或警告,為什么會出現(xiàn)警告呢?

其次,如果我的type類型是錯誤的,按照elementui的習(xí)慣,要么直接報錯崩潰,要么按照默認類型顯示,但是實際顯示是藍色tag,熟悉elementui的人都知道,藍色樣式一般就是對應(yīng)的primary的類型,難道說明我設(shè)置的type=“primary”生效了,那為什么又會發(fā)出警告呢?

三、vue與elementui在不同版本下的細微變化

產(chǎn)生上述疑問后,我突然意識到一個問題,我當前的項目是基于Vue3+Vite開發(fā)的,之前的項目是基于Vue2+Webpack開發(fā)的,Vue3匹配的框架庫是elementui plus,Vue2匹配的框架庫是elementui??赡苁莈lementui與elementui plus之間有細微的改動?

查閱elementui官網(wǎng)文檔,發(fā)現(xiàn):elementui中tag的type有五種:"success", "info", "warning", "danger", "",默認/缺省值為藍色tag。

再查閱一下elementui plus的官方文檔,發(fā)現(xiàn)已經(jīng)不存在“”這個類型了,而是直接變成了“primary”。tag的type有:"success", "info", "warning", "danger", "primary",并且能通過color值自定義背景顏色。

到這里就破案了,elementui存在兩個tag的type版本,舊版本中空值和新版中的“primary”效果一致,所以這里出現(xiàn)了一個警告。tpye的值只要不是"success", "info", "warning", "danger", ""這五者之一,就會變成默認的藍色tag,“primary”并沒有生效,這只是一個巧合,開始驗證,我將type的值改為“123”(確定是一個毫無意義的值):

            <el-form-item label="Status: ">
              <el-tag
                :type="
                  getStatus(instance?.status) == 'initialized' ||
                  getStatus(instance?.status) == 'started'
                    ? '123'
                    : getStatus(instance?.status)
                "
                disable-transitions
              >
                {{ getStatus(instance?.status) }}
              </el-tag>
            </el-form-item>

頁面依然顯示為藍色的tag,并且報錯一樣。驗證與猜想一致。

四、仍然存在的一個疑問

我確定我引入的是elementui plus,我這個項目根本就沒有引入elementui,而且Vue3項目中通過defineCompatSource等方式引入Vue2的組件,但這種兼容性是通過橋接實現(xiàn)的,最后的內(nèi)核依然是基于Vue3,運行環(huán)境也是基于Vue3的。

不管是從運行環(huán)境和內(nèi)核的角度(Vue3環(huán)境適配elementui plus),還是從我項目中引入模塊的角度(僅僅只引入了elementui plus),都不應(yīng)該是Vue2要求的"success", "info", "warning", "danger", ""五選一,而應(yīng)該是Vue3中的規(guī)范,"success", "info", "warning", "danger", "primary"五選一。

也就是說雖然我找到了解決警告的方法和出現(xiàn)警告的原因,但其實刨根問底根本就不應(yīng)該出現(xiàn)這個警告。

這個問題以我現(xiàn)在的學(xué)識無法解決,慶幸的是我弄清楚了這個問題的表層和中層原因,已經(jīng)非常足夠了。

不如大膽一點,我認為這是編譯器/編譯環(huán)境、Vite或者Vue官方三者中某一方出現(xiàn)bug,這個可能性是存在的。

五、總結(jié)

一次性解決兩種bug:Invalid prop: custom validator check failed for prop "type". Invalid prop: validation failed for prop "type". Expected one of ["success", "info", "warning", "danger", ""], got value "primary". 

關(guān)鍵不是解決了bug,是知道bug的出現(xiàn)原因,以及有更加深層的思考。思考是bug帶來的最好的禮物。

以上就是Vue升級帶來的elementui沖突警告: Invalid prop: custom validator check failed for prop “type“.的解決方案的詳細內(nèi)容,更多關(guān)于Vue升級導(dǎo)致elementui沖突警告的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 使用vue2實現(xiàn)購物車和地址選配功能

    使用vue2實現(xiàn)購物車和地址選配功能

    這篇文章主要介紹了使用vue2實現(xiàn)購物車和地址選配功能,本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細,需要的朋友可以參考下
    2018-03-03
  • Vue如何更改表格中的某一行選項值

    Vue如何更改表格中的某一行選項值

    這篇文章主要介紹了Vue如何更改表格中的某一行選項值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 淺析Vue中Virtual?DOM和Diff原理及實現(xiàn)

    淺析Vue中Virtual?DOM和Diff原理及實現(xiàn)

    這篇文章主要為大家詳細介紹了Vue中Virtual?DOM和Diff原理及實現(xiàn)的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下
    2023-03-03
  • VUE實現(xiàn)自身整體組件銷毀的示例代碼

    VUE實現(xiàn)自身整體組件銷毀的示例代碼

    這篇文章主要介紹了VUE實現(xiàn)自身整體組件銷毀的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • VUE多個下拉框?qū)崿F(xiàn)雙向聯(lián)動效果

    VUE多個下拉框?qū)崿F(xiàn)雙向聯(lián)動效果

    這篇文章主要為大家詳細介紹了VUE多個下拉框?qū)崿F(xiàn)雙向聯(lián)動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue遍歷生成的輸入框 綁定及修改值示例

    vue遍歷生成的輸入框 綁定及修改值示例

    今天小編就為大家分享一篇vue遍歷生成的輸入框 綁定及修改值示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Electron+Vue實現(xiàn)截屏功能的兩種方式

    Electron+Vue實現(xiàn)截屏功能的兩種方式

    在Electron環(huán)境下,截屏功能相對強大,可以通過desktopCapturer獲取應(yīng)用視頻流,實現(xiàn)對整個應(yīng)用的截屏,而在非Electron環(huán)境下,截屏功能受限,只能截取瀏覽器內(nèi)容,且存在iframe或base64圖片加載問題
    2024-10-10
  • Vue JS對URL網(wǎng)址進行編碼解碼,轉(zhuǎn)換為對象方式

    Vue JS對URL網(wǎng)址進行編碼解碼,轉(zhuǎn)換為對象方式

    這篇文章主要介紹了Vue JS對URL網(wǎng)址進行編碼解碼,轉(zhuǎn)換為對象方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 詳解vue的Des加密解密

    詳解vue的Des加密解密

    這篇文章主要為大家介紹了vue的Des加密解密使用實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • Nuxt.js SSR與權(quán)限驗證的實現(xiàn)

    Nuxt.js SSR與權(quán)限驗證的實現(xiàn)

    這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗證的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11

最新評論