Entrar Ainda não tem acesso?
6
respostas

Curso (Vue.js parte 1) Aula 2 - atividade 2 - Problema na declaração do componente

Referente ao curso Vue.js parte 1: construindo Single Page Applications, no capítulo Adequando o template gerado e atividade Problema na declaração do componente

por Rodrigo Aulicino Fairbanks Barbosa
| 2.2k xp | 6 posts

Boa tarde, colegas

Estou iniciando meus estudos em Vue e tenho tido dificuldades para deslanchar. Na lição/atividade anterior criamos um página para exibir a imagem de um cachorro na tela. Nesta lição/atividade temos que criar um documento Passaros.vue para exibir na tela duas imagens de pássaros Calopsitas. É uma questão aparentemente fácil, mas ainda não consegui fazer funcionar. Criei o arquivo .vue conforme mencionado no site, e tentei visualizar as duas calopsitas na tela, mas sem sucesso. Será que estou fazendo alguma coisa errada ? Obrigado

6 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rodrigo, tudo bem?

Compartilha conosco o seu código para saber como está, entender melhor e te ajudar :} Aguardo.

por Rodrigo Aulicino Fairbanks Barbosa
| 2.2k xp | 6 posts
Estrutura de pastas e arquivos:
   Desktop\alurapic
                   \src\assets
                   \src\*.vue + main.js
  Como posso visualizar o resultado do Passaros.vue ?
   Devo utilizar o App.vue como base ?
   Devo criar um outro Index.html ? 
   Devo criar um novo Main.js ?
   Devo atualizar o Main.js atual ?

Códigos: <<< App.vue >>>

<template>
   <div>
   <h1>{{ titulo }}</h1>
   <img :src=foto.url :alt=foto.titulo>
   </div>
</template>

<script>
export default {

   data () {
      return {
        titulo: 'Alurapic',
        foto: {
          url: 'http://academiawashington.com.br/wp-content/uploads/2017/09/coisas-incriveis-sobre-seu-cachorro.jpg',
          titulo: 'cachorro'
        }
      }
   }
}
</script>

<style>
</style>

<<<Passaros.vue >>>

<template>
   <div>
   <h1>Alurapic</h1>
       <img src="img/calopsita1.png" alt="Pássaro">
       <img src="img/calopsita2.png" alt="Pássaro">
   </div>
</template>

<script>
export default {
}
</script>

<style>
</style>
por Rodrigo Aulicino Fairbanks Barbosa
| 2.2k xp | 6 posts
Olá, Laís ! 
Boa tarde !

Meu nome é Rodrigo e sou novo no mundo Alura !
No momento estou aprendendo Vue e estou gostando bastante,
mas tenho tido algumas dúvidas conceituais e tentei colocá-las 
para vc neste Post. Também com relação a ele, tentei colocar os arquivos 
relevantes para vc verificar. Obrigado pela ajuda !
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rodrigo!!

Para que Vue saiba que você está criando um novo componente, você precisa importar para main.js, dessa forma:

import Passaros from './Passaros.vue'

new Vue({
  el: '#passaros',
  render: p => p(Passaros)
})

já no index.html eu criei uma nova id para carregar a imagem:

<div id="passaros"></div>

E o meu template para Passaro.vue ficou dessa forma:

<template>
   <div>
   <h1>Alurapic</h1>
       <img src="./assets/jandaia.jpg" alt="Pássaro Jandaia">
   </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

Start o projeto com npm run dev. No meu teste, a imagem carregou certinho: https://imgur.com/a/QBwmCIE

Teste e me fala se deu certo!

por Rodrigo Aulicino Fairbanks Barbosa
| 2.2k xp | 6 posts

Oi, Laís

Por favor, gostaria de confirmar o meu entendimento da solução que vc me recomendou:

1) No arquivo Passaro.vue, e não Passaro(s).vue como tinha mencionado, duas imagens de pássaros devem ser carregadas ou apenas 1 ? 2) As linha que vc sugeriu para eu adicionar no main.js são para serem adicionadas no final do mesmo ? 3) Devo criar mais algum arquivo .html para exibir as novas imagens de pássaros ? 4) O bloco da index.html pra exibir as imagens deve ficar conforme abaixo ? 

   <body>
       <div id="app"></div>
       <script src="/dist/build.js"></script>
       <div id="passaros"></div>
       <script src="/dist/build.js"></script>
   </body>

Obrigado !

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rodrigo!

Eu fiz um exemplo criando um component Passaros.vue e podendo carregar quantas imagens quiser. No main.js pode adicionar no final sem problema. Não precisa criar nenhum arquivo novo .html, todo as tags ficarão nesse mesmo arquivo. Não é necessário chamar mais de uma vez o mesmo arquivo build.js

Espero ter te ajudado e bons estudos!