Pagination problems in Vue and Laravel - laravel

Question

Here is a component I've made for my Vue app within a laravel project.
<template>
<div>
<h2 class="text-center mt-3 mb-5">Categories</h2>
<form v-on:submit.prevent="addCategory">
<div class="row">
<div class="col-2"></div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" v-model="name.name">
</div>
</div>
<div col-2>
<button class="ml-5 btn btn-primary" v-on:submit.prevent="addCategory">Add New Tag</button>
</div>
<div class="col-2"></div>
</div>
</form>
<div class="row">
<div class="col-2"></div>
<div class="col-md-8">
<br/>
<table class="table table-hover">
<thead>
<tr class="alert-info">
<td>ID</td>
<td>Category Name</td>
<td style="width: 25%">Actions</td>
</tr>
</thead>
<tbody>
<tr v-for="category in categories.data">
<td>{{ category.id }}</td>
<td>{{ category.name }}</td>
<td>
<router-link :to="{name: 'EditCategory', params: { id: category.id }}"
class="btn btn-primary btn-sm ml-auto">Edit
</router-link>
<button class="btn btn-danger btn-sm" v-on:click="deleteCategory(category.id)">Delete
</button>
</td>
</tr>
</tbody>
</table>
<vue-pagination :pagination="categories" #paginate="fetchCategories()" :offset="4"></vue-pagination>
<hr class="custom-hr-divider"/>
</div>
<div class="col-2"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
categories:{
total: 0,
per_page: 2,
from: 1,
to: 0,
current_page: 1
},
name: {}
}
},
created: function () {
this.fetchCategories();
},
components:{
VuePagination: require('../components/Pagination.vue')
},
methods: {
fetchCategories() {
this.axios.get('/categories/index?page=' + this.current_page)
.then(function (response) {
this.users = response.data.data;
this.pagination = response.data;
})
.catch(() => {
console.log('handle server error from here');
});
},
deleteCategory(id) {
let uri = `http://localhost:8000/categories/delete/${id}`;
this.axios.delete(uri);
this.fetchCategories();
},
addCategory() {
let uri = 'http://localhost:8000/categories';
this.axios.post(uri, this.name).then((response) => {
this.fetchCategories();
this.name = {};
})
}
}
};
</script>
Here is the Pagination.vue file I found in an online tutorial.
My app works fine without pagination but introducing this code causes the following errors.
***[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VuePagination>
<DisplayCategory> at resources\assets\js\components\DisplayCategory.vue
<Root>***
Where do I define define the component? Ive been trying to get this to work for hours.
app.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
import App from './App.vue';
import DisplayTag from './components/DisplayTag.vue';
import EditTag from './components/EditTag.vue';
import DisplayCategory from './components/DisplayCategory.vue';
import EditCategory from './components/EditCategory.vue';
const routes = [
{
name: 'DisplayTag',
path: '/tags',
component: DisplayTag
},
{
name: 'EditTag',
path: '/tags/edit/:id',
component: EditTag
},
{
name: 'DisplayCategory',
path: '/categories',
component: DisplayCategory
},
{
name: 'EditCategory',
path: '/categories/edit/:id',
component: EditCategory
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');
Anyone with any ideas what I'm doing wrong?
Thanks in advance.

Answer 1

Achieved pagination by using laravel-vue-pagination
Getting started is easy to follow and I only had to change 1 line as I am using axios.
fetchCategories(page) {
if (typeof page === 'undefined') {
page = 1;
}
// Using vue-resource as an example
let uri = `http://localhost:8000/categories/index?page=`;
this.axios.get(uri + page).then((response) =>
{this.categories = response.data;})