vue3报错:runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelVal

简介: vue3报错:runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelVal

vue3报错:runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelValue”. Expected Boolean, got Object

at


警告的大意是绑定的函数期待得到的是布尔值,但得到的是一个对象


警告原因就是v-model绑定的函数获得的值是一个对象,这个问题一般出现在bus传值或者其他传值方式


逻辑分析:

①el-dialog(不一定是dialog组件)绑定了一个函数

②在script中对函数名进行了定义

③通过bus对这个函数名进行传值

问题出在:

④需要把函数名的.value值设为true

如果没有设置ture,而是把子组件传过来的值(obj类型)赋值给函数名的.vlaue,则会报错

伪代码示意如下:

<tempalte>
//绑定函数
 <el-dialog :function='function' />
</template>
<script setup>
//接受子组件的传值
//问题出在是function.value = e 则报错
bus.on('function', (e) => {
    function.value = true
    )}
//对函数进行定义
const function = ref()
</script> 

搜过其他同类的问题,但这个 Expected Boolean, got Object 问题应该还是算比较新的问题

其他同类的是 期待获得object类型,但得到的是string,诸如此类这里不在叙述,一般都是定义的函数没有写对类型或者赋值没写好类型导致

相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
73 3
|
2月前
|
JavaScript 前端开发 开发工具
【Azure Developer】使用JavaScript通过SDK进行monitor-query的client认证报错问题
AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Check with your subscription administrator, this may happen if there are no active subscriptions for the tenant.
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
170 0
|
2月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
48 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
2月前
|
JavaScript 前端开发
原生js常见报错及其处理方案
原生js常见报错及其处理方案
29 0
|
3月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
60 3
|
20天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
34 1
vue学习第四章
|
20天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
28 1
vue学习第九章(v-model)