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"
                
                :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

CodePudding user response：

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
  }
},