Vue.jsでInvalid prop(Expected Number, got String.)

環境

• vue 2.4.3

現象

親コンポーネントから子コンポーネントにプロパティを渡した際に、バリデーションに引っかかる。

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

// parent.js
<template>
    <div>
        <slider value="50"></slider>
    </div>
</template>

<script>
import Slider from './slider.vue'

export default {
    components: {
        'slider': Slider,
    },
}
</script>

// slider.js
<template>
    <input type="range" :value="value">
</template>

<script>
export default {
    props: {
        value: {
            type: Number,
            default: 0,
        }
    },
}
</script>

対策

動的なプロパティ(v-bind)にする。

// parent.js
<template>
    <div>
        <slider :value="50"></slider>
    </div>
</template>

なるほど。 https://jp.vuejs.org/v2/guide/components.html#リテラル-vs-動的