admin管理员组

文章数量:1033253

报错详解——Vue升级带来的elementui冲突警告： Invalid prop: custom validator check failed for prop “type“.

作者：watermelo37 涉及领域：Vue、SpingBoot、Docker、LLM、python等 --------------------------------------------------------------------- 温柔地对待温柔的人，包容的三观就是最大的温柔。 ---------------------------------------------------------------------

报错详解——Vue升级带来的elementui冲突警告：Invalid prop: custom validator check failed for prop "type".

一、错误情景描述

1、报错情景和信息

在页面渲染的时候，控制台弹出大量警告，严重影响控制台的信息获取功能，但是页面基本能正常显示。

警告内容有两种：

①： 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、解决方案

直面问题，这个警告就是说类型验证失败，类型应该是"success", "info", "warning", "danger", ""的其中之一，但是实际获取的类型是“primary”。

再加上警告第三行说明了是tag标签的type不对，更有助于定位错误位置。

那就找到对应的位置，将tag类型修改为上述五种之一即可。

代码语言：javascript代码运行次数：0运行复制
            <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>

二、深度思考——为什么会警告？为什么页面能显示？

首先，我是在当前项目中整合了以前写的内容，原则上不应该会有错误或警告，为什么会出现警告呢？

其次，如果我的type类型是错误的，按照elementui的习惯，要么直接报错崩溃，要么按照默认类型显示，但是实际显示是蓝色tag，熟悉elementui的人都知道，蓝色样式一般就是对应的primary的类型，难道说明我设置的type=“primary”生效了，那为什么又会发出警告呢？

三、vue与elementui在不同版本下的细微变化

产生上述疑问后，我突然意识到一个问题，我当前的项目是基于Vue3+Vite开发的，之前的项目是基于Vue2+Webpack开发的，Vue3匹配的框架库是elementui plus，Vue2匹配的框架库是elementui。可能是elementui与elementui plus之间有细微的改动？

查阅elementui官网文档，发现：elementui中tag的type有五种："success", "info", "warning", "danger", ""，默认/缺省值为蓝色tag。

再查阅一下elementui plus的官方文档，发现已经不存在“”这个类型了，而是直接变成了“primary”。tag的type有："success", "info", "warning", "danger", "primary"，并且能通过color值自定义背景颜色。

到这里就破案了，elementui存在两个tag的type版本，旧版本中空值和新版中的“primary”效果一致，所以这里出现了一个警告。tpye的值只要不是"success", "info", "warning", "danger", ""这五者之一，就会变成默认的蓝色tag，“primary”并没有生效，这只是一个巧合，开始验证，我将type的值改为“123”（确定是一个毫无意义的值）：

代码语言：javascript代码运行次数：0运行复制
            <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的组件，但这种兼容性是通过桥接实现的，最后的内核依然是基于Vue3，运行环境也是基于Vue3的。

不管是从运行环境和内核的角度（Vue3环境适配elementui plus），还是从我项目中引入模块的角度（仅仅只引入了elementui plus），都不应该是Vue2要求的"success", "info", "warning", "danger", ""五选一，而应该是Vue3中的规范，"success", "info", "warning", "danger", "primary"五选一。

也就是说虽然我找到了解决警告的方法和出现警告的原因，但其实刨根问底根本就不应该出现这个警告。

这个问题以我现在的学识无法解决，庆幸的是我弄清楚了这个问题的表层和中层原因，已经非常足够了。

不如大胆一点，我认为这是编译器/编译环境、Vite或者Vue官方三者中某一方出现bug，这个可能性是存在的。

五、总结

一次性解决两种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".

关键不是解决了bug，是知道bug的出现原因，以及有更加深层的思考。思考是bug带来的最好的礼物。

只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-02，如有侵权请联系 cloudcommunity@tencent 删除开发框架内核编译博客

报错详解——Vue升级带来的elementui冲突警告： Invalid prop: custom validator check failed for prop “type“.

作者：watermelo37 涉及领域：Vue、SpingBoot、Docker、LLM、python等 --------------------------------------------------------------------- 温柔地对待温柔的人，包容的三观就是最大的温柔。 ---------------------------------------------------------------------

报错详解——Vue升级带来的elementui冲突警告：Invalid prop: custom validator check failed for prop "type".

一、错误情景描述

1、报错情景和信息

在页面渲染的时候，控制台弹出大量警告，严重影响控制台的信息获取功能，但是页面基本能正常显示。

警告内容有两种：

①： 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、解决方案

直面问题，这个警告就是说类型验证失败，类型应该是"success", "info", "warning", "danger", ""的其中之一，但是实际获取的类型是“primary”。

再加上警告第三行说明了是tag标签的type不对，更有助于定位错误位置。

那就找到对应的位置，将tag类型修改为上述五种之一即可。

代码语言：javascript代码运行次数：0运行复制
            <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>

二、深度思考——为什么会警告？为什么页面能显示？

首先，我是在当前项目中整合了以前写的内容，原则上不应该会有错误或警告，为什么会出现警告呢？

其次，如果我的type类型是错误的，按照elementui的习惯，要么直接报错崩溃，要么按照默认类型显示，但是实际显示是蓝色tag，熟悉elementui的人都知道，蓝色样式一般就是对应的primary的类型，难道说明我设置的type=“primary”生效了，那为什么又会发出警告呢？

三、vue与elementui在不同版本下的细微变化

产生上述疑问后，我突然意识到一个问题，我当前的项目是基于Vue3+Vite开发的，之前的项目是基于Vue2+Webpack开发的，Vue3匹配的框架库是elementui plus，Vue2匹配的框架库是elementui。可能是elementui与elementui plus之间有细微的改动？

查阅elementui官网文档，发现：elementui中tag的type有五种："success", "info", "warning", "danger", ""，默认/缺省值为蓝色tag。

再查阅一下elementui plus的官方文档，发现已经不存在“”这个类型了，而是直接变成了“primary”。tag的type有："success", "info", "warning", "danger", "primary"，并且能通过color值自定义背景颜色。

到这里就破案了，elementui存在两个tag的type版本，旧版本中空值和新版中的“primary”效果一致，所以这里出现了一个警告。tpye的值只要不是"success", "info", "warning", "danger", ""这五者之一，就会变成默认的蓝色tag，“primary”并没有生效，这只是一个巧合，开始验证，我将type的值改为“123”（确定是一个毫无意义的值）：

代码语言：javascript代码运行次数：0运行复制
            <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的组件，但这种兼容性是通过桥接实现的，最后的内核依然是基于Vue3，运行环境也是基于Vue3的。

不管是从运行环境和内核的角度（Vue3环境适配elementui plus），还是从我项目中引入模块的角度（仅仅只引入了elementui plus），都不应该是Vue2要求的"success", "info", "warning", "danger", ""五选一，而应该是Vue3中的规范，"success", "info", "warning", "danger", "primary"五选一。

也就是说虽然我找到了解决警告的方法和出现警告的原因，但其实刨根问底根本就不应该出现这个警告。

这个问题以我现在的学识无法解决，庆幸的是我弄清楚了这个问题的表层和中层原因，已经非常足够了。

不如大胆一点，我认为这是编译器/编译环境、Vite或者Vue官方三者中某一方出现bug，这个可能性是存在的。

五、总结

一次性解决两种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".

关键不是解决了bug，是知道bug的出现原因，以及有更加深层的思考。思考是bug带来的最好的礼物。

只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-02，如有侵权请联系 cloudcommunity@tencent 删除开发框架内核编译博客

本文标签： 报错详解Vue升级带来的elementui冲突警告 Invalid prop custom validator check failed for prop “type“

版权声明：本文标题：报错详解——Vue升级带来的elementui冲突警告： Invalid prop: custom validator check failed for prop “type“. 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748015815a2242011.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。