Ошибка Laravel-Vue-Pagination при попытке перейти на другую страницу

API.php

Route::get('/products', 'ProductsController@index');

Запрос:

$products = DB::table('sizes')
  ->join('products', 'sizes.id', '=', 'products.sizes')
  ->join('categories', 'products.category', '=', 'categories.id')
  ->select('products.*', 'categories.catname', 'categories.catimage', 'categories.catdescription', 'sizes.size')
  ->where([['products.is_active', '=', 1],['categories.is_active', '=', 1],])
  ->orderBy('products.id', 'ASC')
   ->paginate(5);
return $products;

Vue-компонент:

<div v-for="product in products.data" :key="product.id">
      <h1>{{ product.name }}</h1>
    </div>
    <pagination :data="products" @pagination-change-page="getResults"></pagination>

methods: {
  getResults(page = 1) {
    this.$url.get('products/results?page=' + page)
    .then(response => {
    console.log(response)
    this.products = response.data;
    });
  }
}

Первоначальная загрузка товаров работает, показывает 5 товаров и показывает пагинацию. Всякий раз, когда я пытаюсь щелкнуть новую страницу из разбивки на страницы, я получаю несколько ошибок.

CORS (чего я не понимаю, поскольку мое приложение полностью общедоступно) и две сетевые ошибки

from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

net::ERR_FAILED

Uncaught (in promise) Error: Network Error

Есть ли что-то, что мне здесь не хватает? Должен ли я создать другую конечную точку, которая обрабатывает разбивку на страницы, или это должно обрабатываться из той же самой конечной точки, где она получает исходную разбивку на страницы?


vue.js pagination laravel laravel-vue npm-package
person Mike Shiv    schedule 30.01.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

<сильный>1. Скопируйте и вставьте этот код в новый компонент, например Pagination.vue.

<template>
   <nav aria-label="...">
       <ul class="pagination justify-content-center">
           <li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(1)"  >First page</a>
           </li>
           <li class="page-item" :class="{ disabled: pagination.current_page <= 1 }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(pagination.current_page - 1)"><i class="fa fa-arrow-left"></i></a>
           </li>

           <li class="page-item" v-for="(page,index) in pages"  :key="page" :class="isCurrentPage(page) ? 'active' : ''">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(page)">{{ page }}
                   <span v-if="isCurrentPage(page)" class="sr-only">(current)</span>
               </a>
           </li>

           <li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(pagination.current_page + 1)"><i class="fa fa-arrow-right"></i></a>
           </li>
           <li class="page-item" :class="{ disabled: pagination.current_page >= pagination.last_page }">
               <a style="cursor:pointer" class="page-link" @click.prevent="changePage(pagination.last_page)">Last Page</a>
           </li>
       </ul>
   </nav>
</template>

<script>
   export default {
       props:['pagination', 'offset'],
       methods: {
           isCurrentPage(page){
               return this.pagination.current_page === page
           },
           changePage(page) {
               if (page > this.pagination.last_page) {
                   page = this.pagination.last_page;
               }
               this.pagination.current_page = page;
               this.$emit('paginate');
           }
       },
       computed: {
           pages() {
               let pages = []

               let from = this.pagination.current_page - Math.floor(this.offset / 2)

               if (from < 1) {
                   from = 1
               }

               let to = from + this.offset -1

               if (to > this.pagination.last_page) {
                   to = this.pagination.last_page
               }

               while (from <= to) {
                   pages.push(from)
                   from++
               }

               return pages
           }
       }
   }
</script>

<сильный>2. Сделайте его глобальным в вашем файле js/app.js,

Vue.component('pagination', require('./components/Pagination.vue').default);

<сильный>3. В компоненте vue, ниже к данным, установите компонент нумерации страниц таким образом, вы можете изменить смещение настолько, насколько сможете

<pagination v-if="pagination.last_page > 1" 
  :pagination="pagination" 
  :offset="7" 
  @paginate="getItems()">
</pagination>

<сильный>4. Установить для текущей страницы значение 1,

data(){
   return{
      items: [],
         pagination: {
            current_page: 1,
         },
   }
},

<сильный>5. Создайте метод для отправки номера страницы и сбора данных с разбивкой на страницы,

getItems(){
    axios.get('api/items?page='+this.pagination.current_page)
        .then(response => {
            this.items = response.data.data;
            this.pagination = response.data.meta;
        });
},

<сильный>6. Убедитесь, что вы возвращаете данные с разбивкой на страницы при сборе ресурсов,

public function index(){
    return new GeneralCollection(Item::with('category')->orderBy('name')->paginate(10));
}

*** если у вас нет файла коллекции, создайте его, например «Общая коллекция»,

php artisan make:resource GeneralCollection

затем включите его на контроллерах, где вы хотите вернуть собранные данные,

use App\Http\Resources\GeneralCollection;

<сильный>7. Поздравляем!

person SAKIB    schedule 21.09.2020