一、錯(cuò)誤情景描述

1、報(bào)錯(cuò)情景和信息

在頁(yè)面渲染的時(shí)候，控制臺(tái)彈出大量警告，嚴(yán)重影響控制臺(tái)的信息獲取功能，但是頁(yè)面基本能正常顯示。

警告內(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、解決方案

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

再加上警告第三行說明了是tag標(biāo)簽的type不對(duì)，更有助于定位錯(cuò)誤位置。

那就找到對(duì)應(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>

二、深度思考——為什么會(huì)警告？為什么頁(yè)面能顯示？ 

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

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

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

產(chǎn)生上述疑問后，我突然意識(shí)到一個(gè)問題，我當(dāng)前的項(xiàng)目是基于Vue3+Vite開發(fā)的，之前的項(xiàng)目是基于Vue2+Webpack開發(fā)的，Vue3匹配的框架庫(kù)是elementui plus，Vue2匹配的框架庫(kù)是elementui?？赡苁莈lementui與elementui plus之間有細(xì)微的改動(dòng)？

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

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

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

            <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>

頁(yè)面依然顯示為藍(lán)色的tag，并且報(bào)錯(cuò)一樣。驗(yàn)證與猜想一致。

四、仍然存在的一個(gè)疑問

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

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

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

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

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

五、總結(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升級(jí)帶來的elementui沖突警告： Invalid prop: custom validator check failed for prop “type“.的解決方案的詳細(xì)內(nèi)容，更多關(guān)于Vue升級(jí)導(dǎo)致elementui沖突警告的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論