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,诸如此类这里不在叙述,一般都是定义的函数没有写对类型或者赋值没写好类型导致

相关文章
|
19天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
18天前
|
JavaScript 前端开发 大数据
数字太大了,计算加法、减法会报错,结果不正确?怎么办?用JavaScript实现大数据(超过20位的数字)相加减运算。
数字太大了,计算加法、减法会报错,结果不正确?怎么办?用JavaScript实现大数据(超过20位的数字)相加减运算。
|
15天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
39 3
|
18天前
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
2天前
|
存储 JavaScript
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
|
9天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
12 0
|
10天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
20 0
|
10天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
9 1
|
14天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
15天前
|
JavaScript
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
【vue】 vue2 修改网页标题和图标logo、全局路径、跨域vue.config.js
18 0