Как разбить на страницы с помощью Vuetify и Laravel? - PullRequest
Новая
       15

Как разбить на страницы с помощью Vuetify и Laravel?

0 голосов
/ 08 октября 2018

Спокойной ночи

Я пытаюсь выполнить подкачку на стороне сервера с помощью Vuetify и Laravel.

Но методы, предоставленные Vuetify, не сработали для меня, чтобы сделать это правильно.У меня есть готовая страница, которую я хочу реализовать с помощью компонентов Vuetify.

Я присоединяю свой код, созданный с помощью простой начальной загрузки. 

  <ul class="pagination">
      <li class="page-item" v-if="pagination.current_page > 1">
          <v-btn flat icon color="red lighten-2">
            <v-icon  @click.prevent="changePage(pagination.current_page - 1, search)">thumb_down</v-icon>
          </v-btn>
      </li>
      <li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page == isActived ? 'active' : '']">
            <v-btn fab dark color="indigo" @click.prevent="changePage(page, search)" v-text="page">
            </v-btn>
      </li>
      <li class="page-item" v-if="pagination.current_page < pagination.last_page">             
          <v-btn flat icon color="red lighten-2">
            <v-icon  @click.prevent="changePage(pagination.current_page + 1, search)">thumb_down</v-icon>
          </v-btn>
      </li>
  </ul>

Метод страницы на сервере: 

    methods:{
            get(page, search){
              let url = `http://127.0.0.1:8000/api/articles?page=${page}&search=${search}`;
              axios.get(url)
                  .then( response => {

                  let res = response.data
                  this.products = res.articles.data; 
                  this.pagination = res.pagination;
                })
                .catch(function (error) {
                  console.log(error);
                })
            },
            changePage(page, search){
                this.pagination.current_page = page;
                this.get(page, search);
          },
 },

Предыдущий код работает правильно, но фактически без использования подкачки компонента Vuetify.

Использование компонента Vuetify для подкачки страниц Я только показываю длину пагинации, но ни в коем случае не могу перейти междустраницы, предоставленные сервером. 

      <v-pagination
        v-model="pagination.current_page"
        :length="pagination.total"
        prev-icon="mdi-menu-left"
        next-icon="mdi-menu-right"
        @input="next"
      ></v-pagination>

Поиск информации означает, что с помощью @ input = "next" я могу вызвать метод для перехода на следующую страницу , но что можетЯ использую для возврата?

Как я могу щелкнуть по любому номеру страницы и запросить страницу на сервере, как в моем коде, созданном с помощью начальной загрузки?

Хотел бы я помочь иЯ благодарю вас.

1 Ответ

0 голосов
/ 30 ноября 2018

Вот что у меня работает с Laravel 5.5 и Vuetify 1.3:

HTML 

<v-pagination
    v-model="pagination.current"
    :length="pagination.total"
    @input="onPageChange"
></v-pagination>

JS 

export default {
    data() {
        return {
            users: null,
            pagination: {
                current: 1,
                total: 0
            }
        }
    },
    methods: {
        getUsers() {
            window.axios.get('/api/users?page=' + this.pagination.current)
                .then(response => {
                    this.users = response.data.data;
                    this.pagination.current = response.data.current_page;
                    this.pagination.total = response.data.last_page;
                });
        },
        onPageChange() {
            this.getUsers();
        }
    },
    mounted() {
        this.getUsers();
    }
}

Laravel 

public function users()
{
    $users = User::paginate(10);

    return response($users, 200);
}

Когда ваш компонент смонтирован, будет вызван getUsers().pagination.current по умолчанию равно 1, поэтому первая страница будет загружена.Ответ будет установлен pagination.total.Vuetify обрабатывает привязку кнопок страницы к pagination.current, поэтому при нажатии на одну из них pagination.current устанавливается на номер страницы, а затем @input вызывает getUsers(), который использует pagination.current для получения выбранной страницы.

Примечание: в laravel 5.8 объект отклика на нумерацию мог измениться с response.data.current_page на response.data.meta.current_page и response.data.last_page на response.data.meta.last_page.

...