JSFiddle - React, Tailwind, and code Playground
by wladyband
HTML
<!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>
<div class="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>
<style>
.table td, .table th {
font-size: 12px;
}
#contato{
width: 115px;
}
</style>
</body>
</html>
<!-- v-if="MySearch" -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.6/vue-resource.js"></script>
<script>
var app = new...