Vue: Adding a sub-component into component

Question

All my pages are created under Page-Component.vue, and I am trying to use vue-data-tables

main.js

var Vue = require('vue')
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import DataTables from 'vue-data-tables'

Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(DataTables)
import App from './App.vue'
import PageContent from './components/PageContent.vue'
import MyPage from './components/MyPage.vue'

let router = new VueRouter({
    // router config
}

var dataTables = DataTables.default;
Vue.component('page-content', PageContent);

let MyApp = Vue.component('app', App);
MyApp = new MyApp({
    el: '#app',
    router,
    store
})

MyPage.vue

<template>
  <page-content page-title="Supervisor Review">
    <div class="main-content">

     <data-tables 
               :data='this.pending_shots'
               >
        <el-table-column prop="shot_id" label="ID" sortable="custom">
        </el-table-column>
        <el-table-column prop="shot_name" label="Shot" sortable="custom">
        </el-table-column>
        <el-table-column prop="shot_description" label="Description" sortable="custom">
        </el-table-column>
      </data-tables>

    </div>
  </page-content>
</template>
<style src="semantic-ui-css/semantic.min.css" media="screen" title="no title" charset="utf-8" />


<script>
import Vue from 'vue'

export default {
    data () {
        return {
            pending_shots: [],
        }
    },
    created: function() {
        Vue.axios.get(
          'http://server:1234/path/to/api', {
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('access_token')
          }
        })
        .then(response => {
          this.pending_shots = JSON.stringify(response.data)
        })
        .catch((error) => {
          this.pending_shots = error
        })
    }
  }
}
</script>

Errors

19:32:08.263 [Vue warn]: Unknown custom element: <el-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DataTables>
       <PageContent> at src/components/PageContent.vue
         <SupervisorReview> at src/components/SupervisorReview.vue
           <Root> 1 6:485:7
    warn webpack-internal:///6:485:7
    createElm webpack-internal:///6:5099:11
    createChildren webpack-internal:///6:5209:9
    createElm webpack-internal:///6:5114:9
    ...
        ...



19:32:08.265 [Vue warn]: Unknown custom element: <el-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <DataTables>
       <PageContent> at src/components/PageContent.vue
         <SupervisorReview> at src/components/SupervisorReview.vue
           <Root> 1 6:485:7
    warn webpack-internal:///6:485:7
    createElm webpack-internal:///6:5099:11
    createChildren webpack-internal:///6:5209:9
    createElm webpack-internal:///6:5114:9
        ...
        ...

Tomer · Accepted Answer · 2017-09-14 12:17:55Z

2

from the docs:

This lib depends on the following element-ui components:

el-table
el-table-column
el-row
el-col
el-input
el-button
el-pagination
el-checkbox
el-checkbox-group

So you need to import ElementUI:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import DataTables from 'vue-data-tables'

Vue.use(ElementUI)
Vue.use(DataTables)

answered Sep 14, 2017 at 12:17

Tomer

17.9k17 gold badges82 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue: Adding a sub-component into component

Errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Errors

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related