Почему неизвестная ошибка пользовательского элемента при использовании компонента vuetable-2? - PullRequest
Новая
       4

Почему неизвестная ошибка пользовательского элемента при использовании компонента vuetable-2?

0 голосов
/ 31 марта 2020

При добавлении приложения @ vue / cli 4.0.5 https://github.com/ratiw/vuetable-2 компонент Я получил ошибку в консоли: 

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <vuetable-pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Мой vue файл: 

<template>
    <div class="test" style="width: 100% !important;">
        <h1>This is a test page</h1>


        <div class="ui container">
            <vuetable ref="vuetable"
                      api-url="https://vuetable.ratiw.net/api/users"
                      :fields="fields"
                      pagination-path=""
                      @vuetable:pagination-data="onPaginationData"
            >
            </vuetable>
            <vuetable-pagination ref="pagination"
                                 @vuetable-pagination:change-page="onChangePage"
            ></vuetable-pagination>
        </div>



    </div>
</template>

<script>
    import Vue from 'vue'

    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination";


    Vue.use(Vuetable);

    export default {
        components: {
            'vuetable-pagination': Vuetable.VuetablePagination,
            Vuetable,
            VuetablePagination,
        },

        data() {
            return {
                fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'],
            }
        }, // data () {


        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },

        }, // methods: {

    }
</script>

Я полагаю, что я добавил VuetablePagination в части импорта и компонентов на свою страницу, но выглядит неверно?

Какой способ использования этого компонента действителен?

Спасибо!

1 Ответ

1 голос
/ 01 апреля 2020

Вы можете попробовать это

Добавить Bootstrap 

npm install bootstrap --save

Main. js

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Ваш компонент vue

<template>
    <div class="app" style="width: 100% !important;">
        <h1>This is a test page</h1>


        <div class="ui container">
            <vuetable ref="vuetable"
                      api-url="https://vuetable.ratiw.net/api/users"
                      :css="css.table"
                      :fields="fields"
                      pagination-path=""
                      @vuetable:pagination-data="onPaginationData"
            >
            </vuetable>
            <vuetable-pagination ref="pagination"
                                 @vuetable-pagination:change-page="onChangePage"
                                 :css="css.pagination"
            ></vuetable-pagination>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'

    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination";


    Vue.use(Vuetable);

    export default {
        components: {
            Vuetable,
            VuetablePagination,
        },

        data() {
            return {
                fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'],
                css: {
                    table: {
                        tableClass: 'table table-striped table-bordered table-hovered',
                        loadingClass: 'loading',
                        ascendingIcon: 'glyphicon glyphicon-chevron-up',
                        descendingIcon: 'glyphicon glyphicon-chevron-down',
                        handleIcon: 'glyphicon glyphicon-menu-hamburger',
                    },
                    pagination: {
                        infoClass: 'pull-left',
                        wrapperClass: 'vuetable-pagination pull-right',
                        activeClass: 'btn-primary',
                        disabledClass: 'disabled',
                        pageClass: 'btn btn-border',
                        linkClass: 'btn btn-border',
                        icons: {
                        first: '',
                        prev: '',
                        next: '',
                        last: '',
                        },
                    }
                }
            }
        }, // data () {


        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },
            onChangePage (page) {
                this.$refs.vuetable.changePage(page)
            }

        }, // methods: {

    }
</script>
...