如何在 Vue 3 中使用 laravel-vue-pagination？

Question

我正在使用Vue 3。

并且想要使用laravel-vue-pagination。 为此，我使用 NPM 安装了该插件，并在我的 package.json 中看到它：

"dependencies": {
    "@meforma/vue-toaster": "^1.0.3",
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "laravel-vue-pagination": "^2.3.1",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
}

在

main.js

中，我像这样导入它：

import laravelVuePagination from 'laravel-vue-pagination'

并像这样使用它：

const app = createApp(App).use(store).use(router).use(laravelVuePagination)

我在我的应用程序中这样使用它：

<laravelVuePagination :data="users" @pagination-change-page="getUsers"></laravelVuePagination>

它不起作用，我在控制台中出现此错误：

[Vue warn]: Failed to resolve component: laravelVuePagination

我是 Vue 的初学者，当然我忘记了一些东西。谢谢您的建议。

Answer 1

它可能不兼容，但你注册了组件

.component()

不是

.use()

Answer 2

我使用了 Vue 3 和 Laravel 10/11，这个过程运行良好。

1。首先将分页设置为 Laravel 控制器返回数据

public function index()
{
    return response()->json(Buyer::paginate(5));
}

2。使用npm或yarn安装分页包

npm install laravel-vue-pagination  

---

yarn add laravel-vue-pagination

3.然后，导入分页组件： 选择您的分页样式并导入它，您只能使用一种样式。

import { Bootstrap4Pagination } from 'laravel-vue-pagination';
import { Bootstrap5Pagination } from 'laravel-vue-pagination';
import { TailwindPagination } from 'laravel-vue-pagination';

4。应用分页并获取数据。我用的是axios你也可以使用fetch函数来获取数据：

我提供了一个简单的示例来帮助您入门。

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { Bootstrap5Pagination } from 'laravel-vue-pagination';

const buyers = ref([]);

const getData = async(page = 1) =>{
  try {
    const res = await axios.get(`https://example.com/buyers?page=${page}`);
    buyers.value = res.data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

onMounted(getData);
</script>

<template>
  <div>
    <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="buyer in buyers.data" :key="buyer.id">
            <td>{{ buyer.id }}</td>
            <td>{{ buyer.name }}</td>
          </tr>
        </tbody>
    </table>

    <Bootstrap5Pagination 
        :data="buyers" 
        @pagination-change-page="getData"
    />
  </div>
</template>

快乐编码😍😍