javascript - Inconsistent behaviour of props for NumberString in Vue.js 2.5.16 - Stack Overflow

admin管理员组

文章数量:1289541

This is a long term existing issue for me, let's say I have a parent and child ponent.

// parent
<div>
  // passing a dynamic value
  <child :param="timestamp"/>
</div>

// Child
props: {
  param: {
    type: Number,
    required: true,
  }
},

When the param value passed into child ponent, it should pass the validation.

however, it shows the error

type check failed for prop "param". Expected Number, got String.

If I changed the type into String, it still showed the error but in a opposite way

type check failed for prop "param". Expected String, got Number.

Would be grateful to know how to solve this issue, thanks.

==========================================================================

Sorry for not explaining very well in first example.

So in my code base, I pass a variable to child ponent, the type of the value is always Number, let's say it's a timestamp, so when I pass the value, the inconsistent error appears all the time, which really confuses me.

Meanwhile, I use v-bind since I pass dynamic variable to child ponent.

This is a long term existing issue for me, let's say I have a parent and child ponent.

// parent
<div>
  // passing a dynamic value
  <child :param="timestamp"/>
</div>

// Child
props: {
  param: {
    type: Number,
    required: true,
  }
},

When the param value passed into child ponent, it should pass the validation.

however, it shows the error

type check failed for prop "param". Expected Number, got String.

If I changed the type into String, it still showed the error but in a opposite way

type check failed for prop "param". Expected String, got Number.

Would be grateful to know how to solve this issue, thanks.

==========================================================================

Sorry for not explaining very well in first example.

So in my code base, I pass a variable to child ponent, the type of the value is always Number, let's say it's a timestamp, so when I pass the value, the inconsistent error appears all the time, which really confuses me.

Meanwhile, I use v-bind since I pass dynamic variable to child ponent.

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow edited Aug 4, 2018 at 2:33 蔡佳峰 asked Aug 3, 2018 at 11:39 蔡佳峰蔡佳峰 21933 silver badges1010 bronze badges 4

• 2 What do you use the v-bind in v-bind:param="12345" for? Right now it looks like you want to pass a data variable called "12345" of your parent ponent. If you want to send a plain old string, remove v-bind – Bennett Dams Commented Aug 3, 2018 at 11:51
• 1 I can't reproduce your problem. Do you mind posting your full code? – FK82 Commented Aug 3, 2018 at 12:34
• @BennettDams I think I didn't explain it well. Actually I passed a dynamic variable, which is in timestamp format, it's definitely not a static value, that's the reason why I am using v-bind. – 蔡佳峰 Commented Aug 4, 2018 at 2:32
• Does your timestamp variable have a String value in at least a single moment? Like its initial value before receiving an Integer, or after getting the Integer value, do you "clean" it with an empty String? It has to be an integer all the time – Samir Haddad Commented Aug 5, 2018 at 22:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I had the same issue and simply solved it by passing both possibilties in the prop definition, so instead of

props: {
     myprop: Number, 
     [..]
}

I say it may be both:

props: {
    myprop: [String, Number],
    [..]
}

I realize this might not be a clean solution if the prop value has to be exactly of a certain type, but I think I just leave this here anyways.

Just have:

<child :param="12345"/>

You do not need to bind that way.

See this example: https://codesandbox.io/s/ryv49jm594

App.vue

<template>
  <div id="app">
    <HelloWorld :param="12345" />
  </div>
</template>

<script>
import HelloWorld from "./ponents/HelloWorld";

export default {
  name: "App",
  ponents: {
    HelloWorld
  }
};
</script>

HelloWorld.vue

<template>
  <p>{{ param }}</p>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    param: {
      type: Number,
      required: true
    }
  }
};
</script>

本文标签： javascriptInconsistent behaviour of props for NumberString in Vuejs 2516Stack Overflow