seeee

var detalles = new Vue ({
    el: "#detalleCliente",
    data: {
        logged: true,
        cliente: null,
    },
    methods: {
        detallar: function (selectedClient) {
            this.logged = false;
            this.cliente = selectedClient;
        },
        goBack: function() {
            this.logged = true;
            clientes.buscar();
            clientes.logged = true;
        }
    }
})

var clientes = new Vue({
    el: "#tabla-clientes",
    data: {
        logged: false,
        clientes,
        paginaActual: 0,
        nombreFantasia: "",
        page: {
            totalPages: 0
        }
    },
    methods: {
        cargar: function (json) {
            this.clientes = json._embedded.clienteResources;
            this.page = json.page;
            this.paginaActual = json.page.number;
        },
        buscar: function () {
            this.paginaActual = 0;
            consultaClientes(this.paginaActual, this.nombreFantasia)
        },
        previous: function () {
            this.paginaActual--;
            consultaClientes(this.paginaActual, this.nombreFantasia)
        },
        next: function () {
            this.paginaActual++;
            consultaClientes(this.paginaActual, this.nombreFantasia)
        },
        detallarCliente: function(cliente) {
            this.logged = false;
            detalles.detallar(cliente);
        }
    },
    computed: {
        hasNext: function () {
            return clientes.paginaActual + 1 !== clientes.page.totalPages
        },
        hasPrevious: function () {
            return clientes.paginaActual !== 0
        },
    }
})

function consultaClientes (page, nombreFantasia) {
    $.get({
        url: 'http://demo-paljet.bbjetcloud.com/pjet-api/clientes',
        crossDomain: true,
        data: {
            page: page,
            nom_fantasia: nombreFantasia
        },
        headers: {
            EmpID: 1,
            Authorization: 'Basic ' + btoa(login.user + ':' + login.password)
        }
    }).done(function (json){
        clientes.cargar(json)
    }).fail(function (){
        alert("HICISTE ALGO MAL FALITENS !!!");
    })
}

var login = new Vue({
    el: '#login',
    data: {
        logged: false,
        user: "ADMIN",
        password: "ADMIN"
    },
    methods: {
        ingresar: function () {
            $.get({
                // http://10.0.0.197:9003/clientes
                url: 'http://demo-paljet.bbjetcloud.com/pjet-api/clientes',
                crossDomain: true,
                data: {
                    page: clientes.paginaActual,
                    nom_fantasia: clientes.nombreFantasia
                },
                headers: {
                    EmpID: 1,
                    Authorization: 'Basic ' + btoa(login.user + ':' + login.password)
                }
            }).done(function (resultadoJSON) {
                login.logged = true;
                clientes.cargar(resultadoJSON);
                clientes.logged = true;

            }).fail(function () {
                alert("HICISTE ALGO MAL FALITENS !!!");
            });

        }
    }
})

$(document).ready(login.ingresar())


//HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container-fluid">
        <form id="login" v-if="!logged">
            <div class="form-group">
                <input type="text" v-model="user" class="form-control" id="usuario" aria-describedby="emailHelp"
                    placeholder="Usuario" required>
            </div>

            <div class="form-group">
                <input type="password" v-model="password" class="form-control" id="inputPassword"
                    placeholder="Contraseña" required>
            </div>

            <button v-on:click.prevent="ingresar" class="btn btn-primary">Ingresar</button>
        </form>

        <div id="tabla-clientes" class="center" v-if="logged">
            <form style="display:inline-block">
                <div id="busqueda" class="center2">
                    Search: <input type="text" @input="buscar(page, nombreFantasia)" v-model="nombreFantasia" placeholder="busca" id="busqueda"/>
                    <button class="btn btn-primary"> Buscar
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </div>
            </form>
            <div class="pager">
                <a class="glyphicon glyphicon-arrow-left" v-if="hasPrevious" v-on:click="previous"></a>
                <span class="badge num"> {{ paginaActual }} de {{ page.totalPages }}</span>
                <a class="glyphicon glyphicon-arrow-right arrowRight" v-if="hasNext" v-on:click.prevent="next"></a>
            </div>

            <table class="myTable">
                <thead>
                    <tr>
                        <th scope="col">ID Cliente</th>
                        <th scope="col">Razon Social</th>
                        <th scope="col">Nombre Fantasia</th>
                        <th scope="col">Domicilio</th>
                        <th scope="col">Localidad</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- v-bind:class="{selected: selectedClient === client}" -->
                    <tr class="niceColor" v-for="cliente in clientes" type="value" v-on:click="detallarCliente(cliente)" v-bind:value="nombreFantasia" >
                        <td>{{ cliente.cliId }}</td>
                        <td>{{ cliente.razonSocial }}</td>
                        <td>{{ cliente.nombreFantasia }}</td>
                        <td>{{ cliente.domicilios[0].domicilio || 'no domicilio' }}</td>
                        <td>{{ cliente.domicilios[0].localidad.nombre || 'no localidad' }}</td>
                        <td>{{ cliente.email || 'no email' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="detalleCliente" v-if="!logged" style="width: 100%">
            <form>
                <div>
                    <a class="glyphicon glyphicon-arrow-left" v-on:click="goBack"></a>
                    <h4>Id Cliente: {{ cliente.cliId }}</h4>
                    <h4>Razón social: {{ cliente.razonSocial }}</h4>
                    <h4>Nombre: {{ cliente.nombreFantasia }}</h4>
                    <h4>Cuit: {{ cliente.cuit }}</h4>
                    <h4>Domicilio: {{ cliente.domicilios[0].domicilio || 'no domicilio' }}</h4>
                    <h4>Localidad: {{ cliente.domicilios[0].localidad.nombre || 'no localidad' }}</h4>
                    <h4>Código Postal: {{ cliente.domicilios[0].localidad.cod_postal || 'no cod pos'}}</h4>
                    <h4>Email: {{ cliente.email || 'no email' }}</h4>
                    <h4>Situación ante el iva: {{ cliente.sit_ante_iva_nombre}}</h4>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="myVue.js"></script>

</html>


//CSS


body, html { height: 100%; width: 100%; }

.container-fluid {
    height: 100%;
    display: flex;
}

form {
    padding: 20px;
    min-width: 350px;
    margin: auto;
    background: #fff;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(107,107,107,1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(107,107,107,1);
    box-shadow: 0px 0px 3px 0px rgba(107,107,107,1);
}

form * {
    border-radius: 0 !important;
}

form > button {
    width: 100%;
}

.center {
    width: 80%;
    margin: 0 auto;
}

.pager {
    text-align: RIGHT;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid grey;
}

th, td {
    padding: 15px;
    text-align: left;
}

th {
    background-color: #4CAF50;
    color: white;
}

.niceColor {
    background-color: lightblue;
}
#detalles{
    position: absolute;
    top:0;
}

tr:hover {
    cursor:pointer;
    background-color: rgba(67, 151, 56, 0.671);
}

#falito{
    font-size: 30px;
}

/* PÁGINA LINDA PARA DEJAR LINDAS LAS COSAS, NO SÉ HAY MUCHO RE VIOLENTO */
/* https://www.webucator.com/how-to/how-style-table-with-css.cfm */