[Vue 警告]：道具无效：道具"page"类型检查失败。值为 0 的预期数字，得到值为 " " 的字符串

Question

目前，我正在做一个过滤器和重置按钮的网站。但是，每次我按下重置按钮，它总是显示[Vue warn]: Invalid prop: type check failed for prop "page". Expected Number with value 0, got String with value "".我找不到根本问题，因为我没有定义任何prop"页面"。有人能帮我一下吗?

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

Answer 1

您需要确保您在VDataTable中传递的props - :page具有匹配的类型(在您的情况下应该是Number)。

根本问题是您已经为prop值定义了类型为Number，但不知何故正在传递String，最终抛出错误。

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