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"
            >
 puted: {
     itemPageNumber() {
       if (this.filters.hasOwnProperty('page')) {
         return this.filters.page.value
       }

       return 1
     }
  },

Console error message

found in

---> <VDataTable>
       <VCard>
         <BaseData> at ponents/BaseData.vue
           <BaseListing> at ponents/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
    mit vuexmon.js:474
    mit vuexmon.js:472
    boundCommit vuexmon.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

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"
            >
 puted: {
     itemPageNumber() {
       if (this.filters.hasOwnProperty('page')) {
         return this.filters.page.value
       }

       return 1
     }
  },

Console error message

found in

---> <VDataTable>
       <VCard>
         <BaseData> at ponents/BaseData.vue
           <BaseListing> at ponents/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
    mit vuex.mon.js:474
    mit vuex.mon.js:472
    boundCommit vuex.mon.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

• javascript
• vue.js
• vuejs2

• 3 Can you add the minimal code to showcase your issue? – Salvino D'sa Commented Jul 3, 2022 at 12:27
• i just added the code , but i am not sure whether its this part of code is showing the errors – Gavin Teo Juen Commented Jul 3, 2022 at 12:45
• i think i found the problem. :page="itemPageNumber" when i remove this line , the error would be removed. however i still need this. is there any way to solve this – Gavin Teo Juen Commented Jul 3, 2022 at 13:05
• @Salvino could u help me look into it ? i just updated the code that showcase my issue – Gavin Teo Juen Commented Jul 3, 2022 at 13:13
• Are you sure the type of this.filters.page.value is number. Does it have "" at any case? – skns Commented Jul 3, 2022 at 13:24

1 Answer 1

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.

puted: {
  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
  }
},