v-pagination 不改变页面

Question

<v-data-table
  :headers="headers"
  :items="agents"
  hide-default-footer
  pagination.page.sync="pagination">
  <template slot="item" slot-scope="props">
    <tr>
      <td>{{ props.item.name }}</td>
      <td>{{ props.item.email }}</td>
    </tr>
  </template>
</v-data-table>
<v-row wrap v-if="agents.length > 10">
 <v-col xs="12">
   <div class="pagination-row">
     <v-pagination class="pagination" v-model="pagination.page" :length="pages" :total-visible="7"></v-pagination>
   </div>
  </v-col>
</v-row>

脚本

data: function() {
  return {
    agents: [],
    pagination: {
      rowsPerPage: 10,
      page: 1
    },
    headers: [
      { text: 'Name', value: 'name'},
      { text: 'Email', value: 'email'}
    ],
  }
},
computed: {
  pages () {
    return this.pagination.rowsPerPage && this.inquiries.length !== 0 ? Math.ceil(this.inquiries.length / this.pagination.rowsPerPage) : 0
  }
},

使用上面的代码我正在尝试实现分页。但我面临的问题是，如果我单击 2 显示接下来的 10 行数据不会改变。所以基本上分页不起作用。请帮我找出哪里出错了。我正在使用 vuetify 2.3.10。

Answer 1

我猜你错误地传递了页面的道具。也许pagination.page.sync="pagination" -> page.sync="pagination.page" ?