Cara Membuat Pagination Simple Page Application(SPA) Menggunakan Vue Dan Laravel

Jika Anda memiliki latar belakang PHP, terutama pengalaman Laravel, Anda akan setuju bahwa paginasi sudah diurutkan untuk pengembang. Misalnya, panggil saja metode paginasi seperti ini:

$result = User::paginate(10);

Dan karena Laravel menangani paginasi untuk Anda, Anda bisa melakukan hal berikut dalam tampilan Anda:

{{ $result->links() }}

Dan seluruh paginasi (dan pembuatan tautan) ditangani secara otomatis. Mudah Peasy Tidak Lagi Pusing!

Tapi bagaimana saya bisa dengan mudah membuat pagination seperti itu di Vue menggunakan set hasil yang sama yang dikembalikan dari Laravel? Masuki dunia VUELAR.

Vuelar (Vue + Laravel) memudahkan penerapan paginasi menggunakan Laravel dan menyimpan data apa pun (yang telah diedit) yang ada di URL sehingga pemfilteran atau pengurutan diterapkan di aplikasi Anda Tidak perlu membuat tautan paginasi dan logika setiap saat. Untuk menginstal Vuelar, cukup unduh melalui NPM.

npm install @sirmekus/vuelar

Kemudian daftarkan di aplikasi Vue Anda seperti ini:

import { createApp } from 'vue';
import  vuelarPlugin  from "@sirmekus/vuelar"

let app = createApp({});
app.use(vuelarPlugin)

Dan Anda dapat mulai menggunakannya di mana saja di aplikasi. Cukup berikan hasil lengkap (yang pasti dipanggil dengan "paginate()") yang dikembalikan dari aplikasi Laravel Anda di server sebagai penyangga. Paket akan menghasilkan tautan yang diperlukan.

<template>

//template content goes in here. For instance, displaying all users of the platform

<vuelar :links="state.result"  />

</template>

Biasanya, ketika tautan diklik, bilah URL diperbarui dengan "nomor pagination" (dan string kueri lain yang ada), sehingga Anda dapat melihat perubahan URL dan cukup mengekstrak untuk meminta pembaruan aplikasi dapat dilakukan. Dapatkan semua string kueri (jika perlu) dan teruskan sebagai parameter ke aplikasi laravel Anda. Misalnya:

<template>

//template content goes in here. For instance, displaying all users of the platform

<vuelar v-if="state.result.last_page > 1" :links="state.result"  />

</template>

<script>
import { reactive, watch } from 'vue'
import { useRoute } from "vue-router"

export default {
    setup() {
        const route = useRoute()
        const endpoint = apiEndpoint //The api endpoint to your Laravel-powered backend where you fetch your data
        const state = reactive({
            result: null, //this is where we'll typical 'save' the result to be used in (y)our template
        })

    //Watch when the URL on the browser tab changes, fetch any available query appended there and then append it to your endpoint URL.
    watch(() => route.params, (toParams, previousParams) => {
            getResult(endpoint, route.query)
        })
        
    async function getResult(endpoint, data=null){
        try {
            const response = await axios.get(endpoint, {
                params: data
            })
            state.result = response.data
        } catch (error) {
           //do whatever your like here
        }
    }

    getResult(endpoint, route.query)

    return {
            state
        }
    }
}
</script>

Tentu saja, ini mengasumsikan Anda menggunakan vue-router, karena ini adalah aplikasi satu halaman dan gaya tautan yang dihasilkan didasarkan pada Bootstrap. Lihat dokumentasi resmi untuk detailnya. Saya harap artikel ini bermanfaat bagi Anda. Artikel selanjutnya akan membahas beberapa paket open source lainnya.

Cara Membuat Pagination Simple Page Application(SPA) Menggunakan Vue Dan Laravel

Artikel Terkait Lainnya :