Vue: Passing an integer to a component throws warning because vue takes it as string

[tristanbes]

Using vue 1.0.14 when using a component like:

<quick-assign-primary-user users_count=0></ quick-assign-primary-user>

With a props definition

var QuickPrimarySelect = Vue.extend({
    template: '#quick-primary-user-template',
    props: {
        users_count: {
            type: Number,
            required: true
        }
    }, ...
})

Gives an error/warning :
[Vue warn]: Invalid prop: type check failed for users_count="0". Expected Number, got String.

Resulting in users_count variable to be undefined

[ediamin]

use a colon before users_count attribute :users_count=0 or :users_count="0"

[tristanbes]

Thanks. Does all the variables passed to a component needs to have : prefix or is it valid only for Number type ?

[kwando]

@tristanbes : is a shortcut for the v-bind directive, so :user_count="0" is the same as v-bind:user_count="0".

The attribute value will always be a string if you are not using v-bind.

http://vuejs.org/api/#v-bind

[tristanbes]

Thanks !

[broox]

it also may not be as explicit, but type can also accept an array of object types. e.g.

    props: {
        users_count: {
            type: [Number, String],
            required: true
        }
    }, 

This can be handy if the value you're passing comes from another variable or data attribute instead of a hard-coded number.

[RaschidJFR]

I'm using the : but I still get the error!

<ops-genie-alert-details :alert="{message:'hi'}"/>

I'm creating a standalon custom component with webpack so I don't know if that may be causing the problem in prop parsing.

[Mrcooder]

@ediamin I had do this, but vue still takes it as string, I solved this problem by bind user_count to a variable.😄