var app = new Vue({
el: '#app',
data: {
bancodedados: [{
endereco: 'Rua Pamplona, 1704 - 1º Andar - Loja 1.15, Jardim Paulista - São Paulo',
localizacao: 'Jardim Pamplona Shopping',
celular: '(11) 94581-8286',
email: '[email protected]'
},
{
endereco: 'Rua Pamplona, 1704 - 1º Andar - Loja 1.15, Jardim Paulista - São Paulo',
localizacao: 'Bourbon Shopping',
celular: '(11) 94581-8286',
email: '[email protected]'
},
{
endereco: 'R. Gen. de Divisão Pedro Rodrigues da Silva, 400, Barueri',
localizacao: 'Parque shopping Barueri',
celular: '(11) 9.8521-2560',
email: '[email protected]'
}, {
endereco: 'Praça dos Cravos, 34, Barueri',
localizacao: '',
celular: '(11) 9.7518-2515',
email: '[email protected]'
}, {
endereco: 'Avenida Leão Machado, 100, Osasco',
localizacao: 'Continental Shopping',
celular: '(11) 3768-0386',
email: '[email protected]'
}, {
endereco: 'Av. dos Autonomistas, 1400 – loja 217, Osasco',
localizacao: 'Shopping União',
celular: '(11) 9.7026-5165',
email: '[email protected]'
}, {
endereco: 'Av. Autonomistas, 1.828, Osasco',
localizacao: 'Super Shopping Osasco',
celular: '(11) 9.4388-0000',
email: '[email protected]'
}, {
endereco: 'Rodovia Raposo Tavares, 23, Cotia',
localizacao: 'Shopping Granja Vianna',
celular: '(11) 9.9477-0752',
email: '[email protected]'
}, {
endereco: 'Rua Jacy Teixeira de Camargo, 940, Campinas',
localizacao: 'Campinas Shopping',
celular: '19) 9.9553-7908',
email: '[email protected]'
}, {
endereco: 'Rod. Dom Pedro I, 131.5 - Jardim Nilópolis, Campinas',
localizacao: 'Galeria Campinas',
celular: '(19) 9.8199-7751',
email: '[email protected]'
}
],
MySearch: ''
},
methods: {
showLink: function(bancodedado) {
alert('abrindo: http://www.google.com/?q=' + bancodedado.localizacao);
//Comentei essa parte por quê não funciona no snippet
//window.open('http://www.google.com/?q=' + bancodedado.localizacao);
}
},
computed: {
filteredBancodedaos() {
return this.bancodedados
.filter((bancoDeDado) => {
return (
bancoDeDado.endereco.match(this.MySearch) ||
bancoDeDado.localizacao.match(this.MySearch) ||
bancoDeDado.celular.match(this.MySearch) ||
bancoDeDado.email.match(this.MySearch)
)
})
}
}
});
.table td, .table th {
font-size: 12px;
}
#contato{
width: 115px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Star War</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script></head><body><divclass="container" id="app">
<div class="row"></div>
<div class="well">
<input type="search" v-model="MySearch" class="form-control" placeholder="Digite a sua busca" />
</div>
<div class="row">
<table class="table">
<thead>
<tr>
<th>Localização</th>
<th id="contato">Contato</th>
<th>E-mail</th>
<th>Endereço</th>
</tr>
</thead>
<tbody>
<tr v-if="MySearch" v-for="bancodedado in filteredBancodedaos" v-on:click="showLink(bancodedado)">
<td>{{ bancodedado.localizacao }}</td>
<td>{{ bancodedado.celular }}</td>
<td>{{ bancodedado.email }}</td>
<td>{{ bancodedado.endereco }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>