点击重置按钮触发Vue警告 page prop类型校验失败期望Number得空串

点击网站筛选模块的重置按钮时，控制台持续抛出警告：
[Vue warn]: Invalid prop: type check failed for prop "page". Expected Number with value 0, got String with value "".
代码中未自行定义名为page的prop，无法定位问题根因。
经排查警告触发链路：点击重置按钮触发BaseFilter组件的reset事件，调用mixin-medical-global-index.js中的resetFilter方法，最终在VDataTable组件处抛出该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
  }
},

控制台报错栈 #

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

1. 报错提到的page prop不是自定义属性，是Vuetify内置VDataTable组件的原生prop，要求传入值必须为Number类型，用来控制当前分页页码。
2. 绑定到:page的计算属性itemPageNumber直接返回this.filters.page.value，点击重置按钮触发resetFilter方法时，筛选对象里的page字段被重置成了空字符串""，不符合page prop的类型要求，因此抛出校验警告。
3. 额外风险：代码同时给VDataTable绑定了:options.sync="tableOptions"和单独的:page、:sort-by、:sort-desc，属于重复绑定分页排序状态，后续可能出现状态不同步的问题。

1. 修正重置筛选逻辑：resetFilter方法中，不要把page字段重置为空字符串，直接设置为数字类型的默认值1（对应第一页）。
2. 给计算属性增加类型兜底逻辑，避免异常值传入组件：

computed: {
  itemPageNumber() {
    if (this.filters.hasOwnProperty('page')) {
      const page = Number(this.filters.page.value)
      // 处理转数字后为NaN、小于1的异常情况，兜底返回第一页
      return isNaN(page) || page < 1 ? 1 : page
    }
    return 1
  }
},

3. 可选优化：移除冗余的:page、:sort-desc.sync、:sort-by.sync绑定，分页、排序状态统一通过tableOptions对象管理，避免重复绑定导致的状态冲突。

内容的提问来源于stack exchange，提问作者Gavin Teo Juen