Блог

 <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 amp;amp; this.inquiries.length !== 0 ? Math.ceil(this.inquiries.length / this.pagination.rowsPerPage) : 0
  }
},
  

Используя приведенный выше код, я пытаюсь реализовать разбивку на страницы. Но проблема, с которой я сталкиваюсь, заключается в том, что если я нажму 2, чтобы отобразить следующие 10 строк, данные не изменятся. Таким образом, в основном разбивка на страницы не работает. Пожалуйста, помогите мне найти, где я ошибаюсь. Я использую vuetify 2.3.10.

Я предполагаю, что вы неправильно передаете реквизиты для страницы. Возможно pagination.page.sync="pagination" -> page.sync="pagination.page" ?