Vuejs2 分页在筛选项Vuetify数据表中不起作用

Vuejs2 分页在筛选项Vuetify数据表中不起作用,vuejs2,vuetify.js,Vuejs2,Vuetify.js,我有一个vuetify数据表,在这里我用(自定义)过滤项绑定该表 <template> <v-data-table :headers="headers" :items="filteredItems" :search="search" no-data-text="No data available."

我有一个vuetify数据表,在这里我用(自定义)过滤项绑定该表

   <template>
    <v-data-table
            :headers="headers"        
            :items="filteredItems"                
            :search="search"
            no-data-text="No data available."     
            hide-actions        
            class="elevation-1"     
            :total-items="pagination.totalItems"        
            :rows-per-page-items="[20, 20]"
          >
    ...
  <template slot="pageText" slot-scope="{ pageStart, pageStop }">
        From {{ pageStart }} to {{ pageStop }}
      </template>
    </template>
</v-data-table> 
      <div class="text-xs-center pt-2">
        <v-pagination v-model="pagination.page" :length="pages"></v-pagination>
      </div>

    <script>
    ...
    export default {
      data() {
        return {
          menu: "",
          pagination: {
            page: 1,
            rowsPerPage: 10,
            totalItems: 0
          },
        ...
          formatted: "",
          search: "",
          items: [],
          type: "",
          ...

        };
      },


      computed: {

        computedPagination() {
          return this.pagination;
        },
        filteredItems() {
          return this.items.filter(i => {
            return (
              (!this.type || i.Type === this.type) &&
              (this.filteredAge === "" ||
                this.filteredAge === 0 ||
                i.Age < this.filteredAge) &&
                this.alumni === "" || i.alumni === this.alumni);
          });
        },
    ...
    </script>

...
从{pageStart}到{pageStop}
...
导出默认值{
数据(){
返回{
菜单:“”,
分页:{
页码:1,
行页码:10,
总计项目:0
},
...
格式:“,
搜索:“,
项目:[],
类型:“,
...
};
},
计算:{
计算分页(){
返回此项。分页;
},
filteredItems(){
返回此.items.filter(i=>{
返回(
(!this.type | i.type==this.type)&&
(this.filteradage==“”||
this.filteredAge==0||
i、 年龄
(我通过一个单独的方法获取数据并填充“items”数组,上面显示的代码中省略了这个方法)

尽管定义了分页,但它仍按预期工作(只显示数据表下方的图标,而不执行任何操作)

是因为缺少filteredItems还是其他配置

谢谢

这是因为您有分页功能。totalItems:0。 当组件装入()时,需要将pagination.totalItems初始化为filteredItems.lenght或items.lenght

mounted(){
   this.pagination.totalItems = items.length;
},