Vue: Expected Number, got String.

[mikebronner]

The following causes an error (running Vue 1.0.4):

                    <calc additions="5" subtractions="3"></calc>

Vue.component('calc', {
    props: {
        additions: {
            type: Number,
            required: true
        },
        subtractions: {
            type: Number,
            required: true
        }
    },

    template: '{{ additions - subtractions }} '
});

[Vue warn]: Invalid prop: type check failed for additions="5". Expected Number, got String.
[Vue warn]: Invalid prop: type check failed for subtractions ="3". Expected Number, got String.

Is this something with the way I am passing properties, or is this a bug in the property-type auto-conversion (similar to past issues on the same topic)?

(The above is a simplified example.)

[yyx990803]

When you pass a prop without v-bind, it is always interpreted as a plain string (as all attributes are), no matter what its content is.

If you want to pass a literal number, you need use v-bind:

<!-- this passes "5" -->
<calc additions="5"></calc>

<!-- this passes 5 -->
<calc :additions="5"></calc>

[mikebronner]

Thanks for the quick response! :) This would be great info to add to the http://vuejs.org/guide/components.html#Prop_Validation section of the guide. :)

[RaschidJFR]

I've got the same problem but I'm actually using v-bind!

<ops-genie-alert-details :alert="selectedAlert"/>

selectedAlerty is an object but I can confirm it is being passed as a string "[object Object]"

[posva]

Hey @RaschidGithub, this is a very old issue. you should ask in the forum or the Discord server, but you will need to share some code or nobody will be able to help you 🙂

[zhaoweih]

When you pass a prop without v-bind, it is always interpreted as a plain string (as all attributes are), no matter what its content is.

If you want to pass a literal number, you need use v-bind:

<!-- this passes "5" -->
<calc additions="5"></calc>

<!-- this passes 5 -->
<calc :additions="5"></calc>

This works for me.thx

[lAvishai]

but can i do when i use $router.push ?
const myObj = {"ID":123,"Title":"SomeTitle"}
this.$router.push({ name: 'item', params: { pramObj: myObj }});

[cristiantela]

@lAvishai,

The way you are passing your params is a little bit different from the presented in documentation https://router.vuejs.org/guide/essentials/named-routes.html

It would be:

const myObj = {"ID":123,"Title":"SomeTitle"} this.$router.push({ name: 'item', params: myObj, });