Gabotronix
1 year ago

Issue with vue's dinamic component

Posted 1 year ago by Gabotronix

Hi everybody, I'm making an admin panel for my application using vue, since there are lots of modals and logic in the admin panel I decided to go for vuex and dinamic components.

However I'm getting the following message error when trying to display default dinamic component:

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

found in

---> <AdminPanel> at resources/js/components/admin/AdminPanel.vue
       <Root>

This is pretty rare as I registered the component inside app.js imports.

window.Vue = require('vue');
Vue.config.productionTip = false;

Vue.component('admin-panel', require('./components/admin/AdminPanel.vue'));
Vue.component('post-panel', require('./components/admin/PostPanel.vue'));

import store from './store'

const app = new Vue({

    el: '#vueapp',
    store,

    created () {
        console.log('VUE INSTANCE MOUNTED');
    },

});

This is my admin panel where I have the dinamic component:

<template>
<section>
    <div class="body_maincontainer">
        <div class="sidebar_entries_container" :class="{ sidebar_collapsed: sidebarCollapsed === true }">
            <div class="sidebar_entry_container active_entry" title="Contador de visitas">
                <i class="fa far fas fa-chart-line"></i>
                <span>Visitas</span>
            </div>
            <button class="sidebar_entry_container form_show_results" type="button" @click="showPanel('ReviewPanel')" title="Opiniones y reseñas colgadas en la web">
                <i class="fa fas fa-comment"></i>
                <span>Opiniones</span>
            </button>
            <button class="sidebar_entry_container form_show_results" type="button" @click="showPanel('BugPanel')" title="Reporta fallos de la web directamente al autor">
                <i class="fa fas fa-exclamation-triangle"></i>
                <span>Reportar fallos</span>
            </button>
        </div>
        <div class="entries_maincontainer">
            <dinamic-component :is="activePanel"></dinamic-component>
        </div>
    </div>
</section>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex'
export default {

name: 'AdminPanel',
  
data: function() {
    return {
            
    };
},

props: {
    allglobals: {required:true}
},

mounted() {
    console.log(this.$options.name+' component successfully mounted');
},

computed: {
    ...mapState('AdminPanel', ['activePanel', 'sidebarCollapsed']),
},

methods: {
    ...mapActions('AdminPanel', ['showPanel', 'toggleSidebar']),
}
};
</script>
<!--STYLES-->
<style scoped>
.sidebar_collapsed{}
</style>

And this is my vuex AdminPanel module, inside here I have an activePanel property wich is the name of the component I want to selectively render:


//STATE
const state = {
    activePanel: 'PostPanel',
    sidebarCollapsed: false
}

//GETTERS
const getters = {

}

//ACTIONS
const actions = {


    showPanel({ commit }, panel) {
        
        commit( 'SHOW_PANEL', {panel: panel} );
    },

    toggleSidebar({ commit }) {
        
        commit( 'TOGGLE_SIDEBAR' );
    },


}

//MUTATIONS
const mutations = {

    SHOW_PANEL (state, panel) {
        state.activePanel = panel;
    },

    TOGGLE_SIDEBAR (state) {
        state.sidebarCollapsed = !state.sidebarCollapsed;
    },

}

export default {
  namespaced: true, state, getters, actions, mutations
}

Any help appreciated!

Oh, and just in case here is my PostPanel component wich I want to load inside AdminPanel component.

<template>
<div class="entry_container">
    <div class="entry_header_title_container" style="">
        <span class="entry_header_title">Publicaciones</span>
        <button class="entry_header_new_button" type="button" title="Crear nuevo"><i class="fa fa-plus"></i>Nuevo</button>
    </div>
    <p class="entry_header_description">Desde aquí podrás redactar tus propias publicaciones, crea eventos, artículos, notícias para atraer el interés de tus clientes</p>
    <table class="entry_table_container">
        <tr>
            <th class="entry_table_header" width="5%">Categoría</th> 
            <th class="entry_table_header" width="5%">Titulo</th> 
            <th class="entry_table_header" width="20%">Contenido</th>
            <th class="entry_table_header" width="1%">Imagen</th>
            <th class="entry_table_header" width="1%">Descripción</th>
            <th class="entry_table_header" width="1%">Visible</th> 
        </tr>
        <tr class="row" v-if="posts" v-for="post in posts" :key="post.id">
            <td>' + item.postcategory.name + '{{ post.postcategory.name }}</td>
            <td>' + item.title + '{{ post.title }}</td>
            <td v-html="post.body"></td>
            <td><div class="image_row_container" :style="'background-image:url(' + post.image + ');'"></div></td>
            <td v-html="post.imageDescription"></td>
            <td class="checkbox_row" style=""><input type="checkbox" class="entry_checkbox" :checked="post.isVisible"></td>
            <td class="row_buttons_container">
                <button class="row_buttons_button boot_blue" @click="showPostModal('PostUpdateModal', post)" type="button" title="Editar"><i class="fas fa-pencil-alt"></i></button>
                <button class="row_buttons_button boot_red" @click="showPostModal('PostDeleteModal', post)" type="button" title="Eliminar"><i class="fas fa-trash-alt"></i></button>
            </td>
        </tr>
    </table>
</div>
</template>
<!--SCRIPTS-->
<script>
import { mapState, mapActions } from 'vuex'
export default {

name: 'PostPanel',
  
data: function() {
    return {
              
    };
},

mounted() {
    console.log("'${this.$options.name} component succesfully mounted'");
    this.fetchAllPosts();
},

computed: {
    ...mapState('Posts', ['posts']),
},

data: function() {
    return {
            
    };
},

methods: {
    ...mapActions('PostPanel', ['togglePostVisible', 'updatePost', 'createPost', 'deletePost', '']),
    ...mapActions('MainModal', ['showModal']),
    ...mapActions('Posts', ['fetchAllPosts']),
}
};
</script>
<!--STYLES-->
<style scoped>
.image_row_container{width:110px; height:60px;  background-size:cover;}
.checkbox_row{text-align:center;}
</style>

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