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

aparece um erro na tag <imagem-responsiva>

Tudo parece estar bem, mas o console emite um alerta de erro: "tag has no matching end tag."

<!-- código do módulo -->

<template>
  <img class="imagem-responsiva" :src="url" :alt="titulo">
</template>

<script>
  export default {
    props: ['url','titulo']
  }
</script>

<style scoped>
    .imagem-responsiva {
      width: 100%;
    }
</style>
<!-- codigo da App.vue -->

<template>

<div class="corpo">

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

  <input type="search" class="filtro" @input="filtro = $event.target.value" placeholder="filtre por titulo">

  <ul class="lista-fotos">
    <li class="lista-fotos-item" v-for="foto of fotosComFiltro">
      <meu-painel :titulo="foto.titulo">
        <imagem-responsiva :url="foto.url" :titulo="foto.titulo">
      </meu-painel>

    </li>

  </ul>
</div>

</template>

<script>

import Painel from './components/shared/painel/Painel.vue';
import ImagemResponsiva from './components/shared/Imagem-Responsiva/ImagemResponsiva.vue';
export default {

  components: {
    'meu-painel': Painel,
    'imagem-responsiva': ImagemResponsiva
  },

  data() {
    return {
      titulo: 'Alurapic',
      fotos: [],
      filtro: ''
          }
        },


  computed: {
    fotosComFiltro() {
        if(this.filtro) {
          let exp = new RegExp(this.filtro.trim(), 'i');
          return this.fotos.filter(foto => exp.test(foto.titulo));
        }
        else {
          return this.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;

  }




  .filtro {
    display: block;
    width: 100%;
    box-shadow: 5px 5px 5px;
  }


</style>
6 respostas
solução!

Essa mensagem de erro ocorre quando uma tag, seja de um componente ou HTML não é fechada corretamente, indicando um erro de digitação.

Olhei rapidamente seu código (inclusive eu alterei para ficar colorido corretamente). Vi que o componente esta assim:

<imagem-responsiva :url="foto.url" :titulo="foto.titulo">

Ele não possui a tag de fechamento:

<imagem-responsiva :url="foto.url" :titulo="foto.titulo"/>

Pode ser outras tags além dela. Mas tenta esse ai. Aguardo seu retorno.

Oi Cicero! Conseguiu?

Tudotranquilo. Fiz o que vc indicou e funcionou. So' nao entendi pq no video vc nao fecha a tag e ainda assim funciona.

Ué? Então era para funcionar, mas o mais correto é fechar. Só se foi outro elemento que você não fechou e corrigiu. Mistério!!! Vou fazer um teste aqui e posto para você já já.

Teste aqui e ele tolerou sem fechar a tag. Sendo assim, suspeito que havia outra tag que não estava aberta e fechada no seu projeto. Como saberemos?

Que tal executar seu projeto e remover o fechamento da tag e ver se funciona. Se funcionar, o problema era outra tag que você corrigiu ao logo do problema.

Assim como o aluno, eu gosto de saber quando coisas como essa acontecem.

Dá erro sem o / mesmo. No caso do vídeo, deve ter funcionado sem porque eu devia estar usando a versão um pouco diferente da sua. Como vc criou o projeto depois de mim, ele pode ter ficado mais rígido.

Mas fica o entendimento de que se não fechar a tag dá problema, inclusive o Vue mostra no console.

Abraço meu aluno! (surpresas do Vue)