Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não consigo importar e comunicar com componente


App.vue

<template>

<div class="corpo">

    <div class="teste" >
    <h1 class="centralizado">{{titulo}}</h1>
    </div>

        <ul class="lista-fotos">
            <li class="lista-fotos-item" v-for= "foto of fotos">

                <meu-painel :titulo="foto.titulo">
                    <img class="imagem-responsiva ":src="foto.url" :alt="foto.titulo">              
                </meu-painel>

            </li>

        </ul>

</div>
</template>

<script>
import Painel from 'src/assets/components/shared/painel/Painel.vue'

export default {

  components: {

    'meu-painel': Painel
  },

  data () {
    return {
      titulo: 'Alurapic', 

      fotos: []
    }
  },
  created() {

    this.$http
      .get('http://localhost:3000/v1/fotos')
      .then(res => res.json())
      .then(fotos => this.fotos = fotos, err => console.log(err));
  }
}
</script>

<style>

    .centralizado{
        text-align: center;
    }  


    .corpo{
        font-family: Helvetica, sans-serif;
        margin:0 auto;
        width: 96%;

    }

    .lista-fotos{
        list-style:none;
    }

    .lista-fotos .lista-fotos-item{
        display: inline-block;

    } 

</style>

Painel.vue

<template>


    <div class="painel">
            <h2 class="painel-titulo">{{ titulo }}</h2>
            <div class="painel-corpo">          
            </div><!-- fim painel-corpo -->
    </div><!-- fim painel -->

</template>

<script>

export default {
    props:['titulo']      

}
</script>

<style>

    .painel {
    padding: 0 auto;
    border: solid 2px grey;
    display: inline-block;
    margin: 5px;
    box-shadow: 5px 5px 10px grey;
    width: 200px;
    height: 100%;
    vertical-align: top;
    text-align: center;
  }

  .painel .painel-titulo {
    text-align: center;
    border: solid 2px;
    background: lightblue;
    margin: 0 0 15px 0;
    padding: 10px;
    text-transform: uppercase;
  }

    .imagem-responsiva{
        width: 100%;

    }


    /*.teste{
        background-color: red;
        color:white;
        width: auto;          
    }*/

</style>




Erro:

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.
js?type=script&index=0!./src/App.vue
Module not found: Error: Can't resolve 'src/assets/components/shared/painel/Pain
el.vue' in 'C:\Users\Rafael\Desktop\alurapic\src'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?typ
e=script&index=0!./src/App.vue 24:0-68
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-serve
r ./src/main.js
2 respostas
solução!

Olá! O arquivo foi salvo na pasta correta? Verifica para mim?

Olá professor, eu estava importando o componente de forma errada, percebi e concertei, Obrigado pela ajuda!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software