CODEWITHSUNDEEP
javascriptvue.jsvuejs2
serge
serge

Reputation: 15239

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

Upvotes: 7

Views: 10750

Answers (3)

Radu Diță
Radu Diță

Reputation: 14211

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>

Upvotes: 7

Sadraque Santos
Sadraque Santos

Reputation: 1849

There is a .number modifier in Vue that transforms the v-model in a number, so you could use:

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

Reference: https://v2.vuejs.org/v2/guide/forms.html#number

Upvotes: 2

VirtualLife
VirtualLife

Reputation: 402

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"

Upvotes: -1

Related Questions