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>