value属性、v-model属性类型错误

最新推荐文章于 2024-09-07 18:20:05 发布
最新推荐文章于 2024-09-07 18:20:05 发布
阅读量3k 收藏
点赞数 2
分类专栏： vue前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PGY0000/article/details/88864084
版权

1、报错

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number with value 4.7, got String with value "4.7".

2、报错原因

（1）、后台返回的数据，是String类型的，而组件Rate要求的v-model或者value属性的值为number型，使用v-model.number并不适用这种情况，

3、解决方法：

使用js提供的方法parseFloat（）方法，如下：

uniapp 中v-model 双向数据报错父子组件的props问题
weixin_42447084的博客
05-15 2647
简单说说v-model问题 v-model虽然是双向数据绑定. 但如果在子组件中，v-model绑定的数据不可以是父组件传递来的对象 在uniapp中,父子组件之间多半是单向数据流通，但也存在子组件通过 this.$emit(‘update:xxx’, xxxValue); 来向父组件传递数据 如果在子组件碰见因因父组件传递过来的props对象值： 请改变v-model对应父组件的data对象改为本子组件的data对象值 或者把v-model改变为@input响应式改变数据，但尽量别再使用父组件通
Vue3中的模板指令——表单输入绑定指令v-model（:value和@input）
传播有益的技术文章，力求精准、专业、专心、专享
06-06 974
v-model指令实现表单输入值与父组件中的属性变量保持同步
vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错
weixin_42792519的博客
01-10 1万+
解决子组件绑定父组件值后的报错
v-model详解
最新发布
dfc_dfc的博客
09-07 1261
v-model详解
在子组件中，v-model props属性时，报错了怎么解决
weixin_65908792的博客
03-21 1336
在组件中，v-model props属性时，报错了怎么解决
vue子组件中的input使用v-model报错
Zxiuping的博客
12-05 3245
vue中子组件中input的值是从父组件传过来的，所以子组件的input标签如果用v-model就会报如图错误， 解决方案： <el-input:value="configure_edgeName"placeholder="请输入edge名称"@input="nameChange"></el-input> 使用:value存值，然后使用@input方法，在n...
v-for 循环时直接使用 v-model 绑定value报错
Harley567
11-24 460
v-for 循环时直接使用 v-model 绑定value报错
v-model 无法更新迭代变量**本身，v-for实现多组单选互不影响
01-20
如果我们尝试直接用这个迭代变量作为`v-model`的绑定目标，Vue会抛出错误，提示“'v-model' directives cannot update the iteration variable 'i' itself.”这是因为在 Vue 的响应式系统中，直接修改迭代变量会导致...
3分钟认识Vue3的v-model
emgexgb_sef的博客
08-01 670
v-model是Vue内置的指令作为属性接收一个变量（不能是常量）绑定到普通组件和自定义组件中//作为普通组件的属性,只有作为表单内的元素属性时才会生效如//作为自定义组件的属性v-model同时做了两件事情属性绑定和自定义事件绑定//内置组件//相当于//自定义子组件//相当于v-model绑定在自定义组件上时，我们需要手动去接收//自定义组件注意。...
[Vue 源码] v-model 逻辑分析
小王的技术库
03-06 346
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
关于前端开发框架vue中的v-model双向绑定自定义组件（第二版）
12-21
1. 当使用`v-model`时，确保子组件的`props`中声明了对应的属性，否则会导致错误。 2. 避免在子组件内部直接修改由`v-model`传入的值，而是应该通过触发`input`事件来通知父组件进行更新。 3. Vue 2.x中，自定义组件...
Vue3 + Directive input元素绑定指令后，在指令中更新input value，v-model未生效
jiaweiliao的博客
01-17 3586
v-model未生效其实（:value绑定的变量未更新）其实就是在指令中改变输入框value时未触发“@input”事件，导致v-moel未生效。可利用dispatchEvent方法收到触发input事件，使v-model生效，更新变量。
uniapp中v-model数据无法读取问题 failed for prop “value“
aybaiwan的博客
05-07 814
刚开始: v-model直接绑定了data中定义的value，localdata数据源中有value值，结果后面程序报错。后面才发现，data中定义的value是用户选出来的值，这里的v-model绑定的要是localdata里面的值。报修类型 v-model你得写repair_value 然后在data里面加一个repair_value:0。
【VUE】使用v-for时给input绑定v-model报错
SZnAl的博客
09-15 808
使用v-for时给input绑定v-model控制台报错：You are binding v-model directly to a v-for iteration alias. This will not 解决方法
uniapp 中app v-model出现的问题
qq_36944548的博客
10-18 1283
v-model 不能与 :value 同时使用，否则，会出错
vue中v-model和:value（即：v-bind:value）
热门推荐
weixin_45153463的博客
02-21 1万+
1、区别 v-mode实现了视图和data中数据的双向绑定，两者其一改变均改变 v-bind:value只是将初始化时data中的数据绑定到input上，修改input中的值并不会改变data中的数据。 2、v-model的本质 v-model其实时一个语法糖，背后本质上是v-bind:value和v-on:input两个操作 父组件将值通过:value传给子组件，当值改变的时候，子组件通过@input通知父组件值发生了改变，形成单向数据流 3、$attrs 和 in
使用组件v-model时的value和model-value
m0_63573777的博客
10-23 2125
在学习自定义指令v-model时，实现父子组件的传递时，子组件的propos，value 为 undifined.仔细看过v-model 的 原理之后，尝试了写一个demo简单模拟下，但是还是不正确。在查阅vue文档中，发现了关于组件的v-model。v-model展开的形式如下。
element-ui form-item v-model和prop不一致验证问题
jam476的专栏
06-29 2839
form-item v-model和prop不一致验证问题
vue中v-model 与 v-bind:value
weixin_30615767的博客
01-11 7499
之前一直认为，v-model相当于下方代码的语法糖，如下： <h1>{{inputValue}}</h1> <input type="text" :value="inputValue" @input="inputValue = $event.target.value"> 最近研究element-ui源码时，发现了compositionstar...
v-model="totalCheck" Invalid prop: type check failed for prop "value". Expected String, got Boolean with value false报错
06-12
出现这个错误的原因是因为 `v-model` 指令默认会将 checkbox 的值绑定为布尔类型，而在你的代码中，`totalCheck` 变量的类型可能是字符串类型，导致类型不匹配的错误。解决这个问题的方法有两种： 1. 将 `totalCheck` 变量的类型改为布尔类型，这样就可以直接将其与 checkbox 的状态进行双向绑定： ```html <template> <div> <input type="checkbox" id="my-checkbox" v-model="totalCheck"> <label for="my-checkbox">Check me out</label> </div> </template> <script> export default { data() { return { totalCheck: false // 将变量类型改为布尔类型 } } } </script> ``` 2. 如果你需要将 checkbox 的状态绑定到一个字符串类型的变量上，可以使用 `:value` 和 `@change` 两个属性来手动绑定 checkbox 的值和状态改变事件： ```html <template> <div> <input type="checkbox" id="my-checkbox" :value="isChecked" @change="handleChange"> <label for="my-checkbox">Check me out</label> </div> </template> <script> export default { data() { return { isChecked: 'false' // 将变量类型改为字符串类型 } }, methods: { handleChange(event) { this.isChecked = event.target.checked ? 'true' : 'false' } } } </script> ``` 在上面的代码中，我们通过 `:value` 属性将 checkbox 的值绑定到 `isChecked` 变量上，并且使用 `@change` 属性监听 checkbox 的状态改变事件。在事件处理函数中，我们将 checkbox 的布尔值状态转换为字符串类型，并将其赋值给 `isChecked` 变量。这样，就可以将 checkbox 的状态与字符串类型的变量进行双向绑定了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值