分页在过滤项目Vuetify数据表中不起作用答案

【问题标题】：Pagination not working in filtered items Vuetify data table分页在过滤项目Vuetify数据表中不起作用
【发布时间】：2018-06-22 06:31:36
【问题描述】：

我有一个 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>

（我通过一个单独的方法获取数据并填充“items”数组，上面显示的代码中省略了该方法）

即使定义了分页，它仍按预期工作（它只是显示数据表下方的图标，没有任何操作）。

是因为filteredItems 还是缺少任何其他配置？

谢谢

【问题讨论】：

标签： vuejs2 vuetify.js

【解决方案1】：

这是因为你有 pagination.totalItems : 0。当组件mounted() 为filteredItems.lenght 或items.lenght

时，您需要初始化pagination.totalItems

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

【讨论】：