运行我的代码时出现错误:未知的自定义元素

Question

我是一个非常初级的web开发人员。我试着做CRUD。我有Laravel和Vue项目。我安装https://www.tutsmake.com/laravel-vue-js-datatables-example-tutorial/

我需要添加到我的项目Datatable。

我有我的文件与datatable: Note.vue:

<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>

和App.vue:

<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>

当我运行我的代码我有错误:

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.

怎么了?

请帮帮我:)

Answer 1

如果你在组件中使用一个组件(就像DOM)，那么你必须将这些组件注册为全局:

，例如:

vue.component("MyComponent", MyComponent)

这应该能解决你的问题!