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#方法重载（overload）、重写（覆盖）（override）、隐藏（new）
重载 同一个作用域内发生(比如一个类里面),定义一系列同名方法,但是方法的参数列表不同.这样才能通过传递不同的参数来决定到底调用哪一个.而返回值类型不同是不能构成重载的. 作用: 重载必须发生在一个 ...
- 【C#基础概念】vs2019 代码段
打开记事本,输入下面代码,然后把文件后缀改为.snippet .然后通过vs2019 工具>代码段管理导入. <?xml version="1.0" encoding= ...
- centos7 下搭建 hfish 2.1.0
HFish是一款基于 Golang 开发的跨平台多功能主动攻击型蜜罐网络钓鱼平台框架系统,为了企业安全防护测试做出了精心的打造 HFish 开发的官网:https://hfish.io HFish地址 ...
- Qt：QThread
0.说明 QThread提供了一种与平台无关的线程管理方法. 一个QThread对象管理一个线程.QThread通过run()方法启动线程.默认情况下,run()方法通过exec()启动一个事件循环, ...
- python3中zip()的用法
zip函数接受任意多个可迭代对象作为参数,将对象中对应的元素打包成一个tuple,然后返回一个可迭代的zip对象. 这个可迭代对象可以使用循环的方式列出其元素 若多个可迭代对象的长度不一致,则所返回的 ...
- ASP.NET Core框架探索(一)
今天我们来结合源码来探究一下ASP.NET CORE Web框架的运行原理. 可以先整体看一下下面这张基于源码分析过程的一个总结大纲,包含各环节完成的关键步骤: 下面我们将一起来结合源码探索启动一个A ...
- vlan端口隔离配置
对于大型网络来说,vlan是一种不错的解决办法,但对于有些项目,项目本身不需要不同vlan之间进行互访,比如有些监控项目就只需要内网访问,那么就没有必要创建vlan了,用户如果还将不同的端口划入不同的 ...
- Python字符串的所有操作
name = 'my name is jack' print(name.capitalize()) #首字母大写 print(name.count('a')) #字符出现次数 print(name.c ...
- 解析ansible远程管理客户端【win终端为例】
一.前提: 1.1.windows机器开启winrm服务,并设置成允许远程连接状态 具体操作命令如下 set-executionpolicy remotesigned winrm quickconfi ...
- K8S 如何隐藏产品TomCat版本信息
k8s隐藏TomCat版本信息,通过sidecar方式初始化修改server.xml文件,并挂载到容器中 1.添加initcontainers initContainers: - name: conf ...