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

user_961631 0
Viewed 7410

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>
vuejs2 vue.js javascript
3 Answers

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>
user_20546020
user_55621910

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"
user_9843410
Related