infernobass7
3 years ago
20
4
Vue

Vue Unknown Custom Component

Posted 3 years ago by infernobass7

I am fairly new with vue and I am trying to build a component that references another component. I have managed to do this successfully with a different file but I can't get this one to work.

Here is the main component: (some pieces have been removed)

<template>
    <div class="col-sm-3">
        <h3>Categories</h3>

        <div class="list-group" id="exp-categories">
            <category v-for="category in categories" :category="category" :exp_cat_active.sync="exp_cat_active"></category>
        </div>
    </div>

    <div class="col-sm-9 items">
        <h3>Expendables</h3>

        <div class="col-xs-6 col-md-4" v-for="expendable in items">
            <expendable :expendable="expendable"></expendable>
        </div>
        <!---->
        <pages :count="expendables.length" :per-page="30" uri="/api/expendables"></pages>
    </div>
</template>

<script>
    import pages from './partials/pagination.vue'
    import category from './partials/Category.vue'
    import expendable from './partials/Expendable.vue'
    export default {

        data() {},

        created() {},

        computed: { },

        methods: {  },

        components:{
            'other-component': pages, category, expendable
        }
    }
</script>

Here is the sub component:

<template>
    <ul class="pagination">
        <li v-for="n in length">
            <a href="#" @click="updateExp">{{ n }}</a>
        </li>
    </ul>
</template>

<script>
    export default {
        data(){
            return{
                activePage:1
            }
        },

        props: ['count', 'perPage', 'uri'],

        computed:{
            length: function() {
                return Math.ceil(count/perPage);
            }
        },

        methods:{
            updateExp: function() {
                this.activePage = n;
            }
        }
    }
</script>

I keep getting the following error when I load the page:

[Vue warn]: Unknown custom element: <pages> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
main.js:2915Error: Warning Stack Trace
    at warn (main.js:2915)
    at checkComponentAttr (main.js:3413)
    at checkComponent (main.js:8849)
    at compileElement (main.js:8641)
    at compileNode (main.js:8602)
    at compileNodeList (main.js:8784)
    at compileNodeList (main.js:8785)
    at compile (main.js:8381)
    at VueComponent.Vue._compile (main.js:10023)
    at VueComponent.Vue.$mount (main.js:11021)

Please sign in or create an account to participate in this conversation.