Home » vue » Unknown custom element when nesting components in Vue.js

Unknown custom element when nesting components in Vue.js

Posted by: admin November 26, 2021 Leave a comment

Questions:

It’s incredible! I have already used nested components in Vue.js and they worked. Now, I created two more and they didn’t work. I just can’t see the problem.

obs. I will include only the two components that can’t be nested.

App.vue

<template>

    <div id="app">
        <menu-home-component></menu-home-component>  Here the component works but I want it in another component.

    ...
</template>

<script>

import MenuHomeComponent from './components/MenuHomeComponent'
import ImoveisDestaqueComponent from './components/ImoveisDestaqueComponent'
 import PainelAnuncios from './components/PainelAnuncios'


var data = {
    secao : "mensagens"
}

export default {
    name: 'app',
    components : {
        MenuHomeComponent, ImoveisDestaqueComponent, PainelAnuncios
    },
    data : function() { return data }
}
</script>

This is the HomeComponent which contains the MenuHomeComponent. I can’t use MenuHomeComponent , “Unknown custom element” error.

<template>
    <div>
        <menu-home-component></menu-home-component>  "Unknown custom element here" error
    </div>
</template>

<script>

    import MenuHomeComponent from './MenuHomeComponent'
    import ImoveisDestaqueComponent from './ImoveisDestaqueComponent'

    export default {
    name: "home"

    }

</script>

MenuHomeComponent contains just a placeholder text:

<template>

    <div>
        Menu Home.
    </div>

</template>

<script>

    export default {        
    }

</script>

Updated to show a working scenario

This is the PainelAnuncios.vue Component

  <script>


import ListaAnuncios from './ListaAnuncios';
import FetchData from 'vue-fetch-data';
import axios from 'axios';



export default {
    name : "painelanuncios"
        ,
    data: function() {
    return {anuncios: [], erroConexao : false}
    },

     mounted () 
{

axios.get('http://www.example.com/anuncios2').then(response => {  this.anuncios = response.data;  }).catch( error => { this.erroConexao = true } );




},
    methods: {

       suspenderAnuncio: function(event)
       {
             alert("depois de alterado, ativo" + event.ativo);

          axios.post('http://www.example.com/painel_de_controle/suspender_anuncio', { imovel_id : event.imovelId, tipo_imovel : 'casa', tipo_anuncio : 'venda', ativo : event.ativo  }).then(response => {  this.anuncios = response.data;  }).catch( error => { alert("não foi possível atualizar o anúncio!") } );
       }


    }

}

</script>

<template>

<div>

<div v-if="erroConexao">
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Erro ao conectar!</strong> Por favor, verifique sua conexão com a internet.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
</div>

<lista-anuncios v-on:onSuspenderAnuncio="suspenderAnuncio" v-bind:anuncios="anuncios" ></lista-anuncios>
</div>

</template>

This is the ListaAnuncios.vue component

<script>

import Anuncio from './Anuncio';

export default {
    name: "listaanuncios",


    estaAberto : false,
    props: ['anuncios', 'comunicacao'],

    methods: {

       suspenderAnuncio: function(event)
       {
          this.$emit('onSuspenderAnuncio', event);
       },
       testar : function(event)
       {
            alert("lieta testar");
       }


    }

}


</script>

<template>

<div>
<div>{{ comunicacao }}</div>
<div v-for="anuncio in anuncios" > 
<anuncio v-model="comunicacao" v-on:onTestar="testar" v-on:onSuspenderAnuncio="suspenderAnuncio" v-bind:anuncio="anuncio"></anuncio>
</div>
</div>

</template>


<style>
</style>

This is the Anuncio Component

     <script>

  export default {
        name: 'anuncio',
        data : function() {
        return {  estaAberto: false, url : 'http://www.example.com' }
        },
        methods: {
             abrirMensagem : function() {
               this.estaAberto = !this.estaAberto;
             },

               testar(event) {

                this.$emit("onTestar", 'event');

               },

              suspenderAnuncio : function(event)
             {

                 var ativo = parseInt(this.anuncio.Ativo);


                   alert("valor do ativo" + ativo);

                   if(ativo == 1)
                   {
                       ativo = 0;
                   }
                   else
                   {
                    ativo = 1;
                   }

                 this.anuncio.ativo = ativo;

                  this.$emit('onSuspenderAnuncio', { imovelId : this.anuncio.ImovelId, ativo : ativo });
             },
             mudarComunicacao : function(event) {
                    this.$emit("input", event.target.value)
             }

        }
        ,

            props : ["anuncio", "value"] 

  }

</script>

<template>

<div>


<input v-on:input="mudarComunicacao" />
<div></div> <img  v-on:click="testar" v-bind:src=" this.url + anuncio.Imagem" /><div> <div> <span> <a v-bind:href="this.url + '/' + anuncio.TipoImovel + 's/' + anuncio.ImovelId ">visualizar</a> </span> <span> <a v-bind:href="this.url + '/' + anuncio.TipoImovel + 's/' + anuncio.ImovelId + '/edit' ">editar</a> </span> 
<span><span v-on:click="suspenderAnuncio">suspender</span></span>

 </div>  </div>
</div>

</template>    
<style scoped>
</style>
Answers:

In the second exported object (the second script element that I assume is in another file other than App.vue, or maybe you are saying that is the version that will not work) there is no components definition. You need a components object member to register the nested component MenuHomeComponent like this.

<script>
    import MenuHomeComponent from './MenuHomeComponent'
    export default {
       components: { MenuHomeComponent }
    }
</script>