Rumah  >  Soal Jawab  >  teks badan

Penyelesaian kepada masalah tidak dapat melompat ke halaman lain apabila menggunakan laravel-Vue-pagination

<p>Dalam jadual, data sedang dipaparkan, tetapi apabila saya mengklik pada nombor halaman yang disediakan oleh Laravel Vue Penomboran, ia menunjukkan kepada saya nombor halaman 1 yang sama. Nah, masalah utama ialah nombor halaman tidak dihantar ke dalam fungsi (API Boleh Gubah). </p> <p><strong>Borang templat</strong></p> <pre class="brush:php;toolbar:false;"><table class="meja berjalur meja bersempadan"> <kepala> <th>SN</th> <th>Jenis Akaun</th> <th>Nama</th> <th>Nama kedai</th> <th>Alamat</th> <th>Nombor hubungan</th> <th>E-mel</th> </kepala> <tbody> <tr v-for="(akaun, i) dalam akaun.data" :key="account.id"> <td>{{ ++i }}</td> <td>{{ account.account_type }}</td> <td>{{ account.name }}</td> <td>{{ (account.shop_name)?account.shop_name: 'KOSONG'}}</td> <td>{{ account.address }}</td> <td>{{ account.contact_number }}</td> <td>{{ account.email }}</td> </tr> </tbody> </table> <Penomboran :data="accounts" @pagination-change-page="getAccounts" </template></pre> <p>Data daripada Composable API dihantar dalam:data dan fungsi (Composable) juga dihantar dalam @pagination-change-page.<strong>Teg skrip</strong></p> <pre class="brush:php;toolbar:false;">import LaravelVuePagination daripada 'laravel-vue-pagination'; eksport lalai { komponen: { 'Penomboran': LaravelVuePagination }, persediaan() { } const penomboran = ref(10); const { accounts, loading, getAccounts } = accountDetails();//Composables API onMounted(() => { getAccounts({halaman:halaman}); }); kembalikan { akaun, pemuatan, dapatkanAccounts }; }, };</pre> </p><p> <p><strong>API Boleh Kompos</strong> Dalam fungsi ini, saya menerima dua parameter, dan di sinilah Penomboran (@penukaran-halaman halaman) harus membuang nombor halaman! </p> <pre class="brush:php;toolbar:false;">import { ref } daripada '@vue/reactivity'; import axios daripada 'axios'; Butiran akaun const = () => akaun const = ref({}); const loading = ref(true); const accountError = ref({}); const getAccounts = tak segerak ({halaman=1,halaman}) => tunggu axios.get('api/account/getAccounts?page='+page+'paginate='+paginate, { tajuk: { Keizinan: `Pembawa ${localStorage.getItem('token')}`, Terima: 'aplikasi/json', } }).then((res) => { accounts.value = res.data; loading.value = palsu; console.log(accounts.value); }).tangkap((resErr) => { loading.value = palsu; accountError.value = resErr; }) } kembalikan { akaun, pemuatan, accountError, getAccounts } } eksport butiran akaun lalai;</pre></p>
P粉598140294P粉598140294441 hari yang lalu613

membalas semua(1)saya akan balas

  • P粉164942791

    P粉1649427912023-08-29 00:48:39

    Berjaya bekerja dengan Composition API Vue3
    Hanya alih keluar parameter penomboran daripada getAccounts dan jangan hantar penomboran ke fungsi.

    Kod dikemas kini </>

    skrip

    import LaravelVuePagination from 'laravel-vue-pagination';
    
    export default {
        components: {
            'Pagination': LaravelVuePagination
        },
      setup() {
        }
       
        const { accounts, loading, getAccounts } = accountDetails();//Composables API    
        onMounted(() => {
          getAccounts();
        });
    
        return { accounts, loading,getAccounts };
      },
    };

    API Boleh Kompos

    import { ref } from '@vue/reactivity';
    import axios from 'axios';
    
    const accountDetails = () => {
        const accounts = ref({});
        const loading = ref(true);
        const accountError = ref({});
    
    
        const getAccounts = async (page=1) => {
            await axios.get('api/account/getAccounts?page='+page, {
                headers: {
                    Authorization: `Bearer ${localStorage.getItem('token')}`,
                    Accept: 'application/json',
                }
            }).then((res) => {
                accounts.value = res.data;
                loading.value = false;
                console.log(accounts.value);
            }).catch((resErr) => {
                loading.value = false;
                accountError.value = resErr;
            })
        }
        return { accounts, loading, accountError, getAccounts }
    }
    export default accountDetails;

    balas
    0
  • Batalbalas