«разбивка на страницы» удалена, используйте «параметры» вместо vuetify

#vue.js #pagination #vuetify.js

#vue.js #разбивка на страницы #vuetify.js

Вопрос:

 <template>
  <div>
    <v-data-table
                  :items="agents"
                  hide-default-footer
                  class="agent-table"
                  v-bind:pagination.sync="pagination">
                  <template slot="item" slot-scope="props">
                    <tr>
                      <td>{{ props.item.first_name }} {{ props.item.last_name }}</td>
                      <td>{{ props.item.email }}</td>
                      <td>{{ props.item.phone }}</td>
                    </tr>
                 </template>
     </v-data-table>
    <div >
       <v-pagination v-model="pagination.page" :length="pages" :total-visible="7"></v-pagination>
    </div>
  </div>
<template>

<script>


  export default {
    data: function() {
      return {
        pagination: {
          rowsPerPage: 15,
          page: 1
        },
        agents:[]
      }
    },
    computed: {
      pages () {
        return this.pagination.rowsPerPage amp;amp; this.agents.length !== 0 ? Math.ceil(this.agents.length / this.pagination.rowsPerPage) : 0
      },
    },
    created() {
     this.fetchAgents();
    }
    methods: {
     fetchAgentss() {
     var that = this;
     this.$axios.get('agents.json')
     .then(response => {
      that.agents = response.data.agents;
     });
    }
   }
  }   
</script>
  

Я обновляю vuetify с версии 1.0.5 до 2.3.10 и использую v-pagination для пользовательской разбивки на страницы, но я получаю эту ошибку
[нарушение] «разбивка на страницы» удалена, вместо этого используйте «параметры»

Пожалуйста, помогите мне найти, где я ошибаюсь

Ответ №1:

Вместо использования v-bind: разбивка на страницы.синхронизация используйте v-bind:options.sync

 {
   page: number,
   itemsPerPage: number,
   sortBy: string[],
   sortDesc: boolean[],
   groupBy: string[],
   groupDesc: boolean[],
   multiSort: boolean,
   mustSort: boolean
}
  

Обратитесь к официальному API

Например