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

jeff

Currently, I am doing a filter and reset button in the website . However, whenever i press the reset button , it keep shows that [Vue warn]: Invalid prop: type check failed for prop "page". Expected Number with value 0, got String with value "". I couldn't find the root problem as I did not define any prop "page". Can anyone help me with this

index.vue


            <v-data-table
                :headers="tableHeaders"
                :items="tableData.results"
                :options.sync="tableOptions"
                :sort-desc.sync="tableSortDesc"
                :sort-by.sync="tableSortBy"
                :server-items-length="tableData.count"
                class="elevation-1 pt-xs-3 pt-sm-3"
                :items-per-page="5"
                v-model="selectedTableData"
                show-select
                :loading="isTableLoading"
                :page="itemPageNumber"
            >
 computed: {
     itemPageNumber() {
       if (this.filters.hasOwnProperty('page')) {
         return this.filters.page.value
       }

       return 1
     }
  },

Console error message

found in

---> <VDataTable>
       <VCard>
         <BaseData> at components/BaseData.vue
           <BaseListing> at components/BaseListing.vue
             <MedicalAdminClinicIndex> at pages/medical/activity/index.vue
               <Nuxt>
                 <VMain>
                   <VApp>
                     <DefaultLayout> at layouts/default.vue
                       <Root> vue.runtime.esm.js:619
    VueJS 23
    created SnackBar.vue:29
    commit vuex.common.js:474
    commit vuex.common.js:472
    boundCommit vuex.common.js:411
    showSnackBar notifier.js:12
    _callee4$ index.vue:564
    Babel 10
    resetFilter mixin-medical-global-index.js:41
    VueJS 4
    reset BaseFilter.vue:16
    VueJS 4
    click vuetify.js:2609
    VueJS 33
Shreeraj

You need to make sure that the props - :page you are passing in the VDataTable has the matching type (in your case it should be Number.

The root problem is you have defined the type as Number for the prop value but somehow a String is being passed, eventually throwing the error.

computed: {
  itemPageNumber() {
    if (this.filters.hasOwnProperty('page') && this.filters.page !== "") {
      return Number(this.filters.page.value)   
      //use Number function only if page.value has String type
    }

    return 1
  }
},

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

[Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]"

Invalid prop: type check failed for prop "value". Expected Boolean, got String with value "0"

Vuejs error, Invalid prop: type check failed for prop. Expected Date, got Number with value

Invalid prop: type check failed for prop "cellClass". Expected String with value "[object Object]", got Object

How to pass ref as prop: [Vue warn]: Invalid prop: type check failed for prop "containerRef". Expected Object, got HTMLDivElement?

Vue 3 Typescript props: [Vue warn]: Invalid prop: type check failed for prop "organisation". Expected Null | Boolean, got Object

Vue.js - Invalid prop: type check failed for prop "src". Expected String, Object, got Promise

vue.js vuetify test-utils warning : Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Object

Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`

vue warning: Invalid prop: type check failed for prop "modalState". Expected Boolean, got Function

VueJs - Invalid prop: type check failed for prop "page". Expected DocumentPageDto, got Object

Invalid prop: type check failed for prop "items". Expected Array, got String

What is the cause of [Vue warn]: Invalid prop: custom validator check failed for prop "value"

Failed prop type: Invalid prop `value` of type `number`

Invalid prop type from router params, expected Number got String

[Vue warn]: Invalid prop: custom validator check failed for prop "time"

Failed prop type: Invalid prop 'value'

Invalid prop: type check failed for prop "data". Expected Array, got Object

Failed prop type: Invalid prop `match.params` of type `object` supplied to `Page`, expected `string`

Warning: Failed prop type: Invalid prop `items[0]` of type `string` supplied to `ImageGallery`, expected `object`

laravel vue pagination return invalid prop type check failed for prop

Redux-form, Invalid prop 'value' of type 'number' supplied to 'TextInput', expected 'string'

invalid prop value of type number supplied to textinput expected string react native

Warning: Failed prop type: Invalid prop `defaultValue` of type `string` supplied to `AutoCompleteSearch`, expected `function`

Failed prop type: Invalid prop `children` of type `string` supplied to `DetailField`, expected `object`

GraphQL: Warning: Failed prop type: Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`

Failed prop type: Invalid prop `responsive` of type `string` supplied to `Image`, expected `boolean`

Failed prop type: Invalid prop `answer` of type `string` supplied to `AnswerItem`, expected `object`

Failed prop type: Invalid prop 'value' of type 'object' supplied to 'TextInput' React Native