david001's avatar

[Vue warn]: Error in render: “TypeError: Cannot read property ‘next’ of undefined”

Hi, I am getting warning "next undefined" when page is mounted. Here next is the pagination link. I have also v-if to check if there is next or not this is my api response


    {
    data: [

    {
    id: 19,
    name: 'abc',
    email:'[email protected]

    }
    }
    ],
    links: {
    first: "https://localhost:800/api/users?page=1",
    last: null,
    prev: null,
    next: "https://localhost:800/api/users?page=2"
    },
    meta: {
    current_page: 1,
    from: 1,
    path: "https://localhost:800/api/users",
    per_page: 10,
    to: 10
    }
    }

This is my code

  < ul
                   v-for="(user, index) in users.data"
                    :key="index"
                  class=""
               >
                < p>{{user.name}}</p>
    < p>{{user.email}}</p>
               < /ul>
               < br /><br />

                <div class="mt-5 flex justify-center" v-if="users.links.next">
                    <button
                        @click.prevent="paginate(users.links.next)"
                        type="button"
                        class=""
                    >
                        Load More
                    </button>
                </div>
            </div>
        </div>
    </template>

    <script type="application/javascript">


    export default {
        data() {
            return {
                users: []
            };
        },
        created() {
            this.paginate();
        },
      
        methods: {
            paginate(url = "") {
                axios
                    .get(url ? url : "/api/users")
                    .then(response => {
                        if (!this.users.data) {
                            this.users = response.data;
                        } else {
                            this.users.data.push(...response.data.data);
                            this.users.links.next = response.data.links.next;
                        }
                    })
                    .catch(error => console.log(error));
            },
         
        }
    };
    </script>
0 likes
0 replies

Please or to participate in this conversation.