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
To solve this issue, the code is shown as below :
computed: {
itemPageNumber() {
if (this.filters.hasOwnProperty('page') && this.filters.page == "") {
return this.filters.page.value
}
return 1
}
},