v-pagination 不改变页面

Posted 2023-02-22

【中文标题】v-pagination 不改变页面

【英文标题】：v-pagination not changing page

【发布时间】：2021-01-09 02:37:34

【问题描述】：

<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。

【问题讨论】：

您找到解决方案了吗？我也面临同样的问题。

【参考方案1】：

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

【讨论】：

页面仍然没有变化