Jul 30, 2021
0
Level 5
[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>
Please or to participate in this conversation.