Vue--解决Expected Number with value 123, got String with value “123“.

本是古典何须时尚 2023-10-01 12:11 17阅读 0赞

原文网址：[Vue--解决Expected Number with value 123, got String with value “123“.\_IT利刃出鞘的博客-CSDN博客][Vue--_Expected Number with value 123_ got String with value _123_._IT_-CSDN]

## 简介 ##

本文用示例介绍Vue开发中的一个常见的警告的方法。

警告信息为：\[Vue warn\]: Invalid prop: type check failed for prop "age". Expected Number with value 123, got String with value "123".

警告的含义：无效的属性：age属性类型检查失败。期望是一个值为123的Number，但接收到的是值为“123”的String。

## 问题复现 ##

用一个组件（Parent.vue）调用另一个组件（Child.vue），子组件（Child.vue）对props进行类型的设置。

### 代码 ###

**Parent.vue（父组件）**

<template>
      <div class="outer">
        <h3>父组件</h3>
    
        名字：<input v-model="name">
        年龄：<input v-model="age">
    
        <child :name="name" :age="age"></child>
      </div>
    </template>
    
    <script>
    import Child from "./Child";
    export default {
      name: 'Parent',
      components: {Child},
      data() {
        return {
          name: 'Tony',
          age: 20
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid red;
      padding: 20px;
    }
    </style>

**Child.vue（子组件）**

<template>
      <div class="outer">
        <h3>子组件</h3>
        <div>获得顶层组件的name：{
       {name}}</div>
        <div>获得顶层组件的age：{
       {age}}</div>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        name: {
          type: String
        },
        age: {
          type: Number
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

**路由（store/index.js）**

import Vue from 'vue'
    import Router from 'vue-router'
    import Parent from "../components/Parent";
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/parent',
          name: 'Parent',
          component: Parent,
        }
      ],
    })

### 测试 ###

**测试1：访问**

访问：[http://localhost:8080/\#/parent][http_localhost_8080_parent]

![9e95bc4e4e55415dbac7bfe894a623f8.png][]

**测试2：修改值**

![5ed5e9b892e347d58ceab213556f7359.gif][]

可以发现：

子组件将props的**name**的type指定为String类型，输入时不会报警告。

子组件将props的**age**的type指定为Number类型，输入时会报警告。

## 原因分析 ##

这样获取的输入值的类型为String类型，而子组件要求是Number类型，所以会报警告。

## 问题解决 ##

将<input>标签获取的值指定为Number类型。官网：[表单输入绑定 — Vue.js][_ Vue.js]

方法是：给 v-model 添加 number 修饰符：

## 解决后的示例 ##

只修改Parent.vue（父组件）：

<template>
      <div class="outer">
        <h3>父组件</h3>
    
        名字：<input v-model="name">
        年龄：<input v-model.number="age" type="number">
    
        <child :name="name" :age="age"></child>
      </div>
    </template>
    
    <script>
    import Child from "./Child";
    export default {
      name: 'Parent',
      components: {Child},
      data() {
        return {
          name: 'Tony',
          age: 20
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid red;
      padding: 20px;
    }
    </style>

测试：

![2a8dc942ae164ec18e1e292cb85c735b.gif][]

[Vue--_Expected Number with value 123_ got String with value _123_._IT_-CSDN]: https://knife.blog.csdn.net/article/details/122382166
[http_localhost_8080_parent]: http://localhost:8080/#/parent
[9e95bc4e4e55415dbac7bfe894a623f8.png]: https://img-blog.csdnimg.cn/9e95bc4e4e55415dbac7bfe894a623f8.png
[5ed5e9b892e347d58ceab213556f7359.gif]: https://img-blog.csdnimg.cn/5ed5e9b892e347d58ceab213556f7359.gif
[_ Vue.js]: https://cn.vuejs.org/v2/guide/forms.html#number
[2a8dc942ae164ec18e1e292cb85c735b.gif]: https://img-blog.csdnimg.cn/2a8dc942ae164ec18e1e292cb85c735b.gif

Vue--解决Expected Number with value 123, got String with value “123“.

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Invalid prop: type check failed for prop "round". Expected Boolean, got String with value "true".

相关 Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with va

相关报错Vue warn]: Invalid prop: type check failed for prop “min“. Expected Number with value 1,

相关 Vue--解决Expected Number with value 123, got String with value “123“.

相关 vue报错：[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String....

相关 Invalid prop check failed for prop "model" . Expected Object,got String with value ""

相关 nvalid prop: type check failed for prop “index“. Expected String with value “5“ 解决办法！

相关 vue报错：Invalid prop: type check failed for prop “index“. Expected String with value

相关 [Vue warn]: Invalid prop: type check failed for prop "action". Expected String with value "undefined

相关 Invalid prop: type check failed for prop “orderId“. Expected Number with value 572, got String with