0

Minha página está funcionando perfeitamente, ela hoje se comporta da seguinte forma;

O usuário clicar no textSearch para realizar uma busca, e a tabela somente vai carregar a busca solicitada pelo usuário.

Veja como está minha página!

Listando Registros

O que exatamente estou precisando?

Por exemplo, se o usuário digitar Parque vai aparecer esse resultado abaixo;

inserir a descrição da imagem aqui

Eu queria colocar uma rotar para uma URL vinculada a esse registro, poderia ser www.google.com, mas o problema que esse registro não é fixo no código HTML ele está vindo de um Array de dados em json como pode ver abaixo;

{   
                endereco: 'R. Gen. de Divisão Pedro Rodrigues da Silva, 400, Barueri',
                localizacao: 'Parque shopping Barueri',
                celular: '(11) 9.8521-2560',
                email: '[email protected]'
       },

Eu só preciso de uma dica para começar a tentar implementar, aceito sugestões!

4
  • Não sei se entendi bem a pergunta,seria isso? 14/02/2018 às 16:46
  • eu fiz um vídeo para explicar melhor minha dúvida: youtube.com/watch?v=JO_-H1kY0Ho&t=4s
    – user10264
    14/02/2018 às 17:02
  • 1
    Vou demorar um pouco para poder ver o vídeo, voltou do trabalho as 19:00 14/02/2018 às 17:40
  • tranquilo, fico muito grato pela sua ajuda.
    – user10264
    14/02/2018 às 19:29

1 Resposta 1

1

Voçê pode adcionar um link dentro do td e fazer um bind com a url

A linha onde fica o link ficaria assim:

<td>
    <a :href="'http://www.google.com/?search&q=' + bancodedados.localizacao">Buscar</a>
</td>

A parte importante nesse código é o uso do :, com ele você pode passar informações dinamicamente para o elemento, no exemplo, passei a string http://www.google.com/?search&q= concatenado com a localização

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: {

    },
    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>
    <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">
                        <td>{{ bancodedado.localizacao }}</td>
                        <td>{{ bancodedado.celular }}</td>
                        <td>{{ bancodedado.email }}</td>
                        <td>{{ bancodedado.endereco }}</td>
                        <td>
                            <a :href="'http://www.google.com/?search&q=' + bancodedados.localizacao">Buscar</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>

Ou você pode executar um método que abre o link ao clicar na linha:

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>
    <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>
</body>

</html>

Os pontos chaves nesse caso são a definição do método:

showLink: function(bancodedado) {
    //Aqui você abre uma nova janela com o link
    window.open('http://www.google.com/?q=' + bancodedado.localizacao);
}

E a atribuição do método no evento de clique no tr:

v-on:click="showLink(bancodedado)"
1
  • 1
    Você chegou próximo da resposta, mas com o condigo que você mostrou já posso conseguir pelo menos tentar fazer sozinho o que quero, muito obrigado.
    – user10264
    14/02/2018 às 23:25

Você deve fazer log-in para responder a esta pergunta.