Currently, I am utilizing matfish-vue-table2 along with server-side implementation.
Below is my Laravel controller where I am able to retrieve the JSON response from the 'api/articles' URL:
public function index()
{
$articles = Article::orderBy('created_at', 'desc')->paginate();
return ArticleResource::collection($articles);
}
This is how I'm integrating vue-table2:
<template>
<div class="people">
<b-card class="mb-3">
<v-server-table :columns="columns" :options="options"></v-server-table>
</b-card>
</div>
</template>
<script>
export default {
data () {
return{
columns: ['id', 'title', 'body','created_at','updated_at'],
options: {
requestFunction: function (data) {
let vm = this;
return axios.get('api/article')
.then((response) => {this.data = response.data.data; this.count = response.data.meta.total;})
.catch(function (e) {
this.dispatch('error', e);
}.bind(this));
}
}
}
},
}
</script>
While I have been successful in populating the table, I am facing an issue with pagination and receiving the error message
TypeError: Cannot read property 'data' of undefined