As a beginner web developer, I am trying to implement CRUD operations in my Laravel and Vue project. Following the steps outlined in this tutorial, I have installed Datatable components into my application.
Now, I need to integrate Datatable into my project. I have created a file named Note.vue with the following content:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Laravel Vue Datatables Component Example - ItSolutionStuff.com</div>
<div class="card-body">
<datatable :columns="columns" :data="rows"></datatable>
<datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import Vue from 'vue';
import { VuejsDatatableFactory } from 'vuejs-datatable';
export default {
components: { VuejsDatatableFactory },
mounted() {
console.log('Component mounted.')
},
data(){
return {
datatTableUrl: Vue.prototype.$apiAdress,
columns: [
{label: 'id', field: 'id'},
{label: 'Name', field: 'name'},
{label: 'Email', field: 'email'}
],
rows: [],
page: 1,
per_page: 10,
}
},
methods:{
getUsers: function() {
axios.get(this.datatTableUrl).then(function(response){
this.rows = response.data;
}.bind(this));
}
},
created: function(){
this.datatTableUrl = this.datatTableUrl+'/api/users/dataTable'+ '?token=' + localStorage.getItem("api_token");
this.getUsers()
}
}
</script>
In addition, I have an App.vue file with the following content:
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="scss">
// Import Main styles for this application
@import 'assets/scss/style';
</style>
<style scoped>
.invalid input,
.invalid textarea,
.invalid select,
.invalid checkbox,
.invalid .cke_chrome {
border: 1px solid red !important;
}
</style>
However, when running the code, I encountered the following errors:
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <datatable> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Notes> at src/views/notes/Notes.vue
<Anonymous>
<CWrapper>
<TheContainer> at src/containers/TheContainer.vue
<App> at src/App.vue
<Root>
Show 91 more frames
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <datatable-pager> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Notes> at src/views/notes/Notes.vue
<Anonymous>
<CWrapper>
<TheContainer> at src/containers/TheContainer.vue
<App> at src/App.vue
<Root>
Notes.vue?50c2:27 Component mounted.
I would appreciate any help or guidance on resolving these issues. Thank you!