Skip to content

Instantly share code, notes, and snippets.

@HigorMonteiro
Created October 4, 2017 01:32
Show Gist options
  • Save HigorMonteiro/9d993c5315bbfe4daea76b2dcf4a4b81 to your computer and use it in GitHub Desktop.
Save HigorMonteiro/9d993c5315bbfe4daea76b2dcf4a4b81 to your computer and use it in GitHub Desktop.
<template>
<div id="">
<div class="col s12 ">
<div class="section">
<div class="filtro_content">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">place</i>
<input id="icon_prefix" type="text" v-model="search" class="validate" placeholder="Bairro ou CEP">
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="col s12 m12">
<div class="section">
<div class="row">
<div v-for="imovel in filteredImoveis">
<div class="col s12 m3">
<!-- aqui inicia -->
<div class="card">
<div class="card-image">
<img v-bind:src="imovel.gallery_photos">
</div>
<div class="card-content">
<span class="ca rd-title"><b>{{imovel.type_immovable}}</b></span>
<h5><b><i class="material-icons">location_on</i>{{imovel.complement}}</b></h5>
<div class="divider"></div>
<p>{{imovel.street}}</p>
<p>{{imovel.cep}}, {{imovel.city}}</p>
<p><b>R$</b> {{imovel.value_venda}}</p>
</div>
<div class="card-action ">
<a href="#" class="waves-effect waves-light btn"><i class="material-icons right">near_me</i>button</a>
</div>
</div>
</div>
</div>
<!-- aqui termina -->
</div>
</div>
<br><br>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Exemplo',
lista: [],
search: '',
}
},
mounted() {
this.$http.get('/api/v1/imoveis/?format=json').then((req) => this.lista = req.data)
},
computed: {
filteredImoveis:function() {
return this.lista.filter((imovel) => {
return imovel.complement.match(this.search) || imovel.cep.match(this.search)
});
}
}
}
</script>
<style lang="css">
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment