Vue报错之"[Vue warn]: Invalid prop: type check failed for prop "jingzinum". Expected Number with value NaN, got String with value "fuNum"."
一.报错截图
[Vue warn]: Invalid prop: type check failed for prop "jingzinum". Expected Number with value NaN, got String with value "fuNum".
二.报错代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件</title>
</head>
<body>
<div id="app">
<!-- 动态使用v-bind传递js中的数据，但静态只能传输字符串-->
<wzwfuzi :dongzinum="fuNum" jingzinum="fuNum"></wzwfuzi>
</div> </body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 父向子组件（将父组件的数据模型绑定到子组件的模板中，实现数据提供）
// 自定义全局组件（子组件），注意这里改变的zinum值不会影响父组件的fuNum值
Vue.component("wzwfuzi",{
template:"<h1>动态获取的值==》{{dongzinum}} 静态获取的值==》{{jingzinum}}</h1>",
props:{ // 对父组件的数据约束
dongzinum:{
type:Number, // 提交的数据类型为number（这里还可以写其他数据类型，不过需要对上传过来的类型）
default:0, // 默认值为0
required:true// 是否必填
},
jingzinum:{
type:Number, // 静态提交的数据类型都是String类型[错误位置]
default:"1", // 默认值为1
required:true // 是否必填
}
}, // 接受父组件传值[自定义名:zinum]
data(){ // 数据模型
return {
newzinum:this.zinum // 将获取过来的值赋值上去
}
}
}) // 父组件：新建Vue
const app = new Vue({
el:"#app",
data:{
fuNum:5
}
})
</script>
</html>
二.分析的原因
因为【静态传递】的数据类型都是String类型
所以我们在定义jingzinum的type为数字类型number后
它接收的【数据类型不同】就出现了问题
导致了该报错的发生
解析：
- 静态传递：就是没有用v-bind调用父组件中的js数据类型来传值，直接传递了写入的value值
- props的形式有两种，还有一种是数组的形式，上面的这种是为了数据约束
三.解决方案
将静态传递的jingzinum中的type值改为String既可
格式==》 type:String
Vue报错之"[Vue warn]: Invalid prop: type check failed for prop "jingzinum". Expected Number with value NaN, got String with value "fuNum"."的更多相关文章
- vue调用组件，组件回调给data中的数组赋值，报错Invalid prop type check failed for prop value. Expecte
报错信息: 代码信息:调用一个tree组件,选择一些信息 <componentsTree ref="typeTreeComponent" @treeCheck="t ...
- vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". Expected String with value "0", got Number with value 0.
vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". ...
- Invalid prop: type check failed for prop "XXX". Expected String, got Object.
项目是Vue的,基于elementUI的后台管理系统. Invalid prop: type check failed for prop "total". Expected Str ...
- Invalid prop: type check failed for prop "maxlength". Expected Number, got String.
1.项目中,使用element-ui的input表单的maxlength属性报错 2.使用场景: <el-input v-model="fname" maxle ...
- Invalid prop: type check failed for prop "maxlength"
Invalid prop: type check failed for prop "maxlength", element 框架时,因为想限制文本框的输入长度, maxlength ...
- [Vue warn]: Invalid prop: type check failed for prop "percentage". Expected Number, got Null
Vue组件报错 <ElProgress> at packages/progress/src/progress.vue 用了element组件 绑定数据时后端给我们传的参数为null,所以组 ...
- [Vue warn]: Invalid prop: type check failed for prop "fullscreen"
fullscreen属性是Dialog弹窗中定义是否为全屏 Dialog的属性,element 官方文档中默认值是false ,于是加入是对其赋值 true,然后报了下面的错误: 解决办法:实际上并不 ...
- [VUE ERROR] Invalid prop: type check failed for prop "list". Expected Array, got Undefined
错误原因: 子组件 props -> list 要求接收的数据类型是 Array, 然而实际接收到的是 Undefined. 子组件代码: props: { list: { type: Arra ...
- Invalid prop: type check failed for prop "xxx". Expected Number, got String.
在子组件progress-circle.vue的template中的定义如下: <svg :width="radius" :height="radius" ...
随机推荐
- 【C#基础概念】Ineterface 接口的设计原则
接口设计方式 自顶向下 (如图所示),自底向上(发现类需要结构了就声明一个接口). 接口的作用 用来解耦.继承 接口的本质
- Java课程设计---实现登录（2）
前面已经完成了登录界面的设计,单击确认按钮可以获取输入的用户名和密码,下面来将演示实现真实的登录(输入值和数据库的比对) 1.设计"登录服务" 通常我们根据业务关系,对相应的操作人 ...
- Caffe2源码解析
写在前面 上一篇文章对Caffe2中的core模块进行了简单拆解Caffe2源码解析之core,本篇给出其它模块的拆解,目的是大致了解每个模块的内容和目标,进一步理解Caffe2的整体框架.内容不多, ...
- java的三大特性----封装、集成、多态
当我们被问到你对java的封装.继承.多态是什么看法的时候,你会想到什么? 想到的会不会是封装就是将类的成员属性用privet修饰一下,达到私有化的目的,只暴露方法,从而达到成员变量私有化的目的. 而 ...
- [差分数组] LeetCode789 得分最高的最小轮调
LeetCode 得分最高的最小轮调 今天当然CV了因为今天比较忙,所以直接走算法,因为什么都不做的话并不符合社会主义核心价值观,今天小学一手查分数组. 题目:并不存在CV了还写什么题解 算法背景: ...
- VuePress 博客优化之增加 Vssue 评论功能
前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...
- C#/VB.NET 将Html转为Excel
本文介绍通过C#和VB.NET代码展示将Html转为Excel文档的方法. dll引用 方法1 将 Spire.XLS for .NET 下载到本地,解压,安装.完成安装后,在安装路径下找到BIN文件 ...
- Spring MVC 实验3 springMVC框架基础
实验三:spring mvc框架基础 实验目的: (1)理解spring mvc框架的运行流程 . (2)掌握springmvc框架的配置 实验要求: 请根据课程内容, 修改项目中的任意一用例,将控 ...
- 阿里云pypi软件包预警
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 背景 Python库的官方仓库pypi允许开发者自由上传软件包,这会导致某些攻击者利用这点构造恶意包进行供应链攻击,在用户安装包或者引入包时触发恶意 ...
- web服务器-Nginx下载限速
web服务器-Nginx下载限速 一. 限速介绍 在生产环境中,为了保护WEB服务器的安全,我们都会对用户的访问做出一些限制,保证服务器的安全及资源的合理分配. 限流(rate limiting)是N ...