[Vue warn]: Invalid prop: type check failed for prop "xxx". Expected Number with value X, got String with value "X"

App.vue

<v-text-field v-model="daysNumber" type="number"></v-text-field>

<MyComponent :daysNumber="daysNumber"/>

  data: () => ({
    daysNumber: 5,

MyComponent.vue

props: {
    daysNumber: { type: Number, required: true }
  },

All works great until I increase the number un in the numeric textbox: (from initial ‘5’ to ‘6’):
Error:

vue.runtime.esm.js?2b0e:619

[Vue warn]: Invalid prop: type check failed for prop “daysNumber”.
Expected Number with value 6, got String with value “6”.

found in

---> <MyComponent> at src/components/MyComponent.vue
       <VContent>
         <VApp>
           <App> at src/App.vue
             <Root>

17 thoughts on “[Vue warn]: Invalid prop: type check failed for prop "xxx". Expected Number with value X, got String with value "X"”

  1. For others that may come across this, my issue was different. Adding .number to v-model caused the same error.

    My ID field was wrong.
    It was using the field name

    :id="dataModel.fieldname"
    

    Instead of the correct index

    :id="dataModel.index" 
    
    Reply

Leave a Comment