[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>

Answer

You need to add the .number modifier to v-model, otherwise the type from the input will be string.

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