Level 6
You don't have any fetchComments method in your Vue-file. I made a pagination component a while ago which works for me: gist - you will also find a tutorial how to make a pagination here at Laracast.
Hello guys, i am trying to make a paginate in my reviews system,
<script>
var companyId = 1;
export default {
name: "Reviews",
data() {
return {
reviews: [],
login: false,
review: {
id: '',
first_name: '',
last_name: '',
title: '',
rate: '',
photo: '',
body: '',
created_at: '',
company_id: '',
},
review_id: '',
pagination: {},
}
},
created() {
this.fetchReviews();
this.randomNumber();
},
methods:{
fetchReviews(page_url) {
let vm = this;
page_url = page_url || '/review/'+companyId+'/';
fetch(page_url)
.then(res => res.json()
)
.then(res => {
this.reviews = res.data;
vm.makePagination(res);
})
.catch(err => console.log(err)
);
},
makePagination(meta) {
let pagination = {
current_page: meta.current_page,
last_page: meta.last_page,
next_page_url: meta.next_page_url,
prev_page_url: meta.prev_page_url,
}
this.pagination = pagination;
},
randomNumber: function () {
this.random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
}
}
}
</script>
for paginate i am using
<!--Paginate-->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"><a
@click="fetchComments(pagination.prev_page_url)" class="page-link" href="#">Previous</a></li>
<li class="page-item disabled"><a href="#" class="page-link text-dark">Page {{ pagination.current_page}}
of {{ pagination.last_page}}</a></li>
<li v-bind:class="[{disabled: !pagination.next_page_url}]" class="page-item"><a
@click="fetchComments(pagination.next_page_url)" class="page-link" href="#">Next</a></li>
</ul>
</nav>
<!--Paginate-->
when i am click on next page in console i see it:
Property or method "fetchComments" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
You don't have any fetchComments method in your Vue-file. I made a pagination component a while ago which works for me: gist - you will also find a tutorial how to make a pagination here at Laracast.
Please or to participate in this conversation.