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">×</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>
