JSON error when attempting to switch pages. #158

Tesseeaye · 2023-01-23T20:51:12Z

Tesseeaye
Jan 23, 2023

Hello, I'm trying to figure out what I'm doing wrong that's preventing me from switching pages with the pagination buttons. I'm able to manually put ?page=2 in the address bar and have the page load with the new content stored in laravelData The error message I get in Firefox's debugger is

The code from my controller that's sending the data looks like this:

public function index()
{
    return Inertia::render('Blog/Home', [
        'posts' => Post::paginate(5)
    ]);
}

My Vue template is reusing code from the documentation for the pagination

<script setup>
import { Head } from '@inertiajs/vue3';
import MainLayout from '@/Layouts/MainLayout.vue';
import Articles from '@/Components/Articles.vue';
import { TailwindPagination } from 'laravel-vue-pagination';

const props = defineProps({
    posts: Object,
});

const laravelData = props.posts;

const getResults = async (page = 1) => {
    const response = await fetch(`?page=${page}`);
    laravelData.value = await response.json();
}

getResults();

</script>
<template>
    <Head>
        <title>Blog</title>
    </Head>

    <MainLayout>
        <article v-for="post in laravelData.data">
            <Articles />
        </article>

        <TailwindPagination
            :data="laravelData"
            @pagination-change-page="getResults"
        />
    </MainLayout>
</template>

The laravelData variable looks like this on page load:

Proxy { <target>: {…}, <handler>: {…} }

<target>: Object { current_page: 1, first_page_url: "http://localhost?page=1", from: 1, … }

current_page: 1

data: Array(5) [ {…}, {…}, {…}, … ]

0: Object { id: 1, title: "Aut alias molestias repellat placeat.", body: "Tempore et dolores nobis dolorem ut ut. Distinctio asperiores consectetur delectus et et. Maxime nemo et et et expedita quas modi.", … }

1: Object { id: 2, title: "Et dolor et excepturi eligendi.", body: "Consequuntur aut consequatur sint. Aut dolorem est numquam quidem. Repellendus ut dolorum ipsa est sit aut labore.", … }

2: Object { id: 3, title: "Iure id et quas exercitationem deserunt inventore occaecati.", body: "Libero nobis aliquam velit adipisci cum. Sit tenetur omnis sit voluptate enim molestiae. Est et molestias mollitia ea veritatis quibusdam. Qui quis voluptates et.", … }

3: Object { id: 4, title: "Numquam odit corporis tenetur quo qui.", body: "Vitae nesciunt alias ut asperiores voluptatem sed. Minus quae autem et est cum. Dolorem architecto repellat quasi numquam et ut in praesentium.", … }

4: Object { id: 5, title: "Corporis autem enim dolorum possimus mollitia.", body: "Maxime ut eius iusto. Rerum aut possimus ut ex. Corrupti aspernatur provident illo adipisci perferendis soluta necessitatibus voluptatem.", … }

length: 5

<prototype>: Array []

first_page_url: "http://localhost?page=1"

from: 1

last_page: 2

last_page_url: "http://localhost?page=2"

links: Array(4) [ {…}, {…}, {…}, … ]

next_page_url: "http://localhost?page=2"

path: "http://localhost"

per_page: 5

prev_page_url: null

to: 5

total: 10

<prototype>: Object { … }

<handler>: Object { get: get2(target, key, receiver), set: set2(target, key, value, receiver), deleteProperty: deleteProperty(target, key), … }
Home.vue:20:9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

JSON error when attempting to switch pages. #158

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

JSON error when attempting to switch pages. #158

Uh oh!

Tesseeaye Jan 23, 2023

Replies: 0 comments

Tesseeaye
Jan 23, 2023