使用 vue + laravel 进行分页答案

【问题标题】：pagination with vue + laravel使用 vue + laravel 进行分页
【发布时间】：2021-07-14 04:25:02
【问题描述】：

在控制器中：

public function index(Request $request, $id) {
    if (!empty($id)) {
        $product = product::select('name', 'price', 'quantity')
            ->where('id', $id)
            ->get()->toArray();
        return response()->json($product);
    }
}

在Vue中，我使用Axios获取数据。

axios
    .get("/api/product", {
        params: {
          id: id,
        },
    })
    .then((res) => {
        this.rows = res.data;
    })
    .catch((error) => {
        console.log(error);
    });

它显示列表没问题但我不希望它获取所有数据..但是通过分页，一键分页它将加载 30 个项目。给我一些想法，谢谢。

【问题讨论】：

标签： laravel vue.js vuejs2

【解决方案1】：

我以前喜欢这个。

在控制器中：

public function index(Request $request, $id)
    {
            if (!empty($id)) {
                $currentPage = $request->input('currentPage', 1);
                $pageSize = $request->input('pageSize', 30);
                $skip = ($currentPage - 1) * $pageSize;

                $product = product::select('name', 'price', 'quantity')
                    ->where('id', $id)
                    ->skip($skip)
                    ->take($pageSize)
                    ->get()->toArray();
                return response()->json($product);
            }
    }

Vue 中的自定义辅助函数

function object2query(obj) {
  let query = "?";
  let tempArray = [];
  for (let key in obj) {
    let value = obj[key];
    if(value) tempArray.push(`${key}=${value}`);
  }
  query += tempArray.join('&');
  return query;
}

在vue axios中获取数据。


let id = 5; // example id;
let pageSize = 30; // example page size;
let currentPage = 2; // example current page;

axios
      .get(`/api/product${object2query({
          currentPage,
          pageSize
        })}`, {
        params: {
          id
        },
      })
      .then((res) => {
        this.rows = res.data;
      })
      .catch((error) => {
        console.log(error);
      });

【讨论】：