Component Vue.js search CEP or Zip code
<!doctype html> | |
<html lang="pt-BR"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" | |
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<meta name="author" | |
content="GilcierWeb - Web Developer - gilcierweb@gmail.com - gilcier06@yahoo.com.br - Sites, Sistemas para Web, E-commerce, Manutenção de Sites."/> | |
<meta name="doc-rights" content="Private"/> | |
<title>Vue.js - by GilcierWeb</title> | |
<link rel="stylesheet" type="text/css" | |
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> | |
</head> | |
<body> | |
<div id="app" class="container"> | |
<button class="btn btn-default-bright btn-raised" data-toggle="modal" data-target="#formModal">Não sei meu CEP? | |
</button> | |
<form action=""> | |
<div class="row"> | |
<div class="col-lg-3"> | |
<label for="zip_code">CEP</label> | |
<input type="text" class="form-control" name="zip_code" id="zip_code" v-model="zip_code" | |
v-on:change="load_cep"> | |
</div> | |
<div class="col-lg-3"> | |
<label for="patio">Logradouro</label> | |
<input type="text" class="form-control" name="patio" id="patio" v-model="patio"> | |
</div> | |
<div class="col-lg-3"> | |
<label for="complement">Complemento</label> | |
<input type="text" class="form-control" name="complement" id="complement" v-model="complement"> | |
</div> | |
<div class="col-lg-3"> | |
<label for="number">Número</label> | |
<input type="text" class="form-control" name="number" id="number" v-model="number"> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-lg-3"> | |
<label for="neighborhood">Bairro</label> | |
<input type="text" class="form-control" name="neighborhood" id="neighborhood" v-model="neighborhood"> | |
</div> | |
<div class="col-lg-3"> | |
<label for="state_id">Estado</label> | |
<input type="text" class="form-control" name="state_id" id="state_id" v-model="state_id"> | |
</div> | |
<div class="col-lg-3"> | |
<label for="city_id">Cidade</label> | |
<input type="text" class="form-control" name="city_id" id="city_id" v-model="city_id"> | |
</div> | |
</div> | |
</form> | |
<div id="app-modal"> | |
<search-cep></search-cep> | |
</div> | |
</div> | |
<template id="search-cep-template"> | |
<!-- BEGIN FORM MODAL MARKUP --> | |
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" | |
aria-hidden="true"> | |
<div class="modal-dialog"> | |
<div class="modal-content"> | |
<div class="modal-header style-default-light"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h4 class="modal-title" id="formModalLabel">Buscar CEP</h4> | |
</div> | |
<div class="modal-body"> | |
<form class="form-horizontal" role="form"> | |
<div class="form-group"> | |
<div class="col-sm-3"> | |
<label for="email1" class="control-label">Rua</label> | |
</div> | |
<div class="col-sm-9"> | |
<input type="text" name="patio" id="patio" v-model="patio" class="form-control" | |
placeholder="informe o nome da rua" required="true"> | |
</div> | |
</div> | |
<div class="form-group"> | |
<div class="col-sm-3"> | |
<label for="city_id" class="control-label">Cidade</label> | |
</div> | |
<div class="col-sm-9"> | |
<input type="text" name="city_id" id="city_id" v-model="city_id" class="form-control" | |
placeholder="Informe a cidade" required="true"> | |
</div> | |
</div> | |
<div class="form-group"> | |
<div class="col-sm-3"> | |
<label for="state_id" class="control-label">Estado</label> | |
</div> | |
<div class="col-sm-9"> | |
<select class="selectpicker form-control" data-live-search="true" name="state_id" | |
id="state_id" v-model="state_id" required="true"> | |
<option value="">Selecione</option> | |
<option value="AC">Acre</option> | |
<option value="AL">Alagoas</option> | |
<option value="AP">Amapá</option> | |
<option value="AM">Amazonas</option> | |
<option value="BA">Bahia</option> | |
<option value="CE">Ceará</option> | |
<option value="DF">Distrito Federal</option> | |
<option value="ES">Espírito Santo</option> | |
<option value="GO">Goiás</option> | |
<option value="MA">Maranhão</option> | |
<option value="MT">Mato Grosso</option> | |
<option value="MS">Mato Grosso do Sul</option> | |
<option value="MG">Minas Gerais</option> | |
<option value="PR">Paraná</option> | |
<option value="PB">Paraíba</option> | |
<option value="PA">Pará</option> | |
<option value="PE">Pernambuco</option> | |
<option value="PI">Piauí</option> | |
<option value="RJ">Rio de Janeiro</option> | |
<option value="RN">Rio Grande do Norte</option> | |
<option value="RS">Rio Grande do Sul</option> | |
<option value="RO">Rondônia</option> | |
<option value="RR">Roraima</option> | |
<option value="SC">Santa Catarina</option> | |
<option value="SE">Sergipe</option> | |
<option value="SP">São Paulo</option> | |
<option value="TO">Tocantins</option> | |
</select> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> | |
<button type="button" class="btn btn-primary" | |
v-on:click.prevent.stop="search_cep">Buscar CEP | |
</button> | |
</div> | |
</form> | |
<table v-if="is_complete" class="table table-bordered no-margin"> | |
<thead> | |
<tr> | |
<th>Endereço</th> | |
<th>CEP</th> | |
<th>Ação</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr v-for="row_cep in response_cep"> | |
<td>{{row_cep.logradouro}} {{row_cep.complemento}} {{row_cep.bairro}} {{row_cep.localidade}} {{row_cep.uf}}</td> | |
<td><strong>{{row_cep.cep}}</strong></td> | |
<td>Escolher</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div><!-- /.modal-content --> | |
</div><!-- /.modal-dialog --> | |
</div><!-- /.modal --> | |
<!-- END FORM MODAL MARKUP --> | |
</template> | |
<!--scripts--> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
</body> | |
</html> |
Vue.component('search-cep', { | |
template: '#search-cep-template', | |
data: function () { | |
return { | |
zip_code: '', | |
state_id: '', | |
city_id: '', | |
patio: '', | |
complement: '', | |
neighborhood: '', | |
number: '', | |
response_cep: [], | |
is_complete: false | |
} | |
}, | |
methods: { | |
search_cep: function (event) { | |
if (event) { | |
event.preventDefault(); | |
} | |
this.zip_code = this.zip_code.trim().replace(/[^0-9]/g, ''); | |
// viacep.com.br/ws/RS/Porto Alegre/Domingos/json | |
url_cep = 'https://viacep.com.br/ws/' + this.state_id + '/' + this.city_id + '/' + this.patio + '/json/'; | |
// clear all headers axios to viacep | |
axios.defaults.headers.common = null | |
axios.get(url_cep).then(function (response) { | |
this.is_complete = true; | |
this.response_cep = response.data; | |
// jQuery('#number').focus(); | |
}.bind(this)).catch(function (error) { | |
console.log(error.statusText); | |
}); | |
} | |
} | |
}) | |
element = document.getElementById("app") | |
if (element != null) { | |
var app = new Vue({ | |
el: "#app", | |
data: function () { | |
return { | |
zip_code: '', | |
patio: '', | |
complement: '', | |
neighborhood: '', | |
number: '', | |
state_id: '', | |
city_id: '', | |
response_cep: [], | |
is_complete: false | |
} | |
}, | |
methods: { | |
load_cep: function (event) { | |
var url_cep, self; | |
if (event) { | |
event.preventDefault(); | |
} | |
this.zip_code = this.zip_code.trim().replace(/[^0-9]/g, ''); | |
url_cep = 'https://viacep.com.br/ws/' + this.zip_code + '/json'; | |
// clear all headers axios to viacep | |
axios.defaults.headers.common = null; | |
axios.get(url_cep).then(function (response) { | |
this.patio = response.data.logradouro; | |
this.complement = response.data.complemento; | |
this.neighborhood = response.data.bairro; | |
this.state_id = response.data.uf; | |
this.city_id = response.data.localidade; | |
jQuery("#number").focus(); | |
}.bind(this)).catch(function (error) { | |
console.log(error.statusText); | |
}); | |
} | |
} | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment