R
R
Ruslan Absalyamov2018-10-19 18:03:39
Vue.js
Ruslan Absalyamov, 2018-10-19 18:03:39

How to register a component in a single-file component?

My problem is that if you take the example https://codepen.io/ratiw/pen/GmJayw they use the component

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

But I have to be in a single-file component, then it doesn’t work for me, because vue does not understand the name in the template. How do I get the pagination component?
Here is all my code
<template>
    <div>
        <Vuetable ref="vuetable"
                  :api-mode="false"
                  :fields="fields"
                  :data="items"
                  track-by="id"
        >
        </Vuetable>
        <!-- Чтобы применить компонент мне нужно понять как он будет называться-->
        
    </div>
</template>

<script>
    import Vuetable from 'vuetable-2';

    const columns = [
        '__checkbox',
        'email',
        {
            name: 'name',
            title: 'Наименование',
            sortField: 'name',
        },
        {
            name: 'phone',
            title: 'Телефон',
            sortField: 'phone',
        },
        {
            name: 'responsible',
            title: 'Ответственный',
            sortField: 'responsible',
        },
        {
            name: 'deals',
            title: 'Сделки',
            sortField: 'deals',
        }
    ];
    const items = [
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Купил' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Продал' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Купил' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Продал' },
    ];

    export default {
        name: "BaseTable",
        components: {
            Vuetable,
//Вот тут встал в ступор
        },
        data() {
            return {
                fields: columns,
                items: items
            }
        },
        methods: {
            onChangePage (page) {
                this.$refs.vuetable.changePage(page)
            },
        }
    }
</script>

<style scoped>

</style>

If I use this library https://ratiw.github.io/vuetable-2/#/Pagination

Answer the question

In order to leave comments, you need to log in

1 answer(s)
L
Luke LikeSkywalker, 2018-10-19
@oolooq

Perhaps vuetable is a plugin for vue? Then you need to connect it via Vue.use

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question