I have a modal problem. My problem is that modal, does not close when clicking the button, tried in many ways, but none worked. How can I resolve this?
<script>
var read = require('read-file-utf8')
var loki = require('lokijs');
var db = new loki('loki.json')
var data = read(__dirname+'/loki.json')
db.loadJSON(data);
const Vue = require('vue');
var clientes = db.getCollection('clientes');
Vue.config.productionTip = false;
new Vue({
el:'#app',
data:{
clientes: [],
client:{
nome:'',
cpf: '',
endereco:'',
telefone:'',
placa:'',
compania:''
},
$('#showModal').modal({
showModal: false();
}),
},
mounted: function(){
this.clientes = clientes.data;
console.log(this.clientes);
},
methods:{
editClient:function(client){
this.mode='edicao';
this.showModal = true;
this.client=client;
}
createClient:function{
this.mode='edicao';
this.showModal = true;
this.client=client;
this.client:{
nome:'',
cpf: '',
endereco:'',
telefone:'',
placa:'',
compania:''
};
}
}
});
</script>
html, body, #home{
height: 100%;
}
#home2{
margin-top: 20px;
margin-bottom: 222px;
padding-bottom: 200px;
padding-top: 200px;
}
body{
background: linear-gradient(to bottom, #5CB4D4,#ffffff);
background-attachment: fixed;
}
/***********BARRA DE NAVEGAÇÃO************/
nav.navbar-transparente{
background: white;
padding: 5px 0px;
}
.navbar-light .navbar-nav .nav-link{
font-weight: 900;
}
.capa{
text-align: center;
}
.fundo{
background-color: rgb(0,0,0,0.6);
}
footer{
background-color: #2b82a1;
padding-top: 2px;
}
footer .navbar-nav a{
color: white;
font-size: 0.8em;
}
footer .navbar-nav a:hover{
color: #5CB4D4;
font-size: 0.8em;
}
#modal{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: rgba(0,0,0,0.7);
}
#modal .wrap{
position: center;
padding: 20px;
width: 60%;
height: 60%;
margin-left: 20%;
margin-top: 10%;
background:#fff;
}
<body>
<section id="home2" class="d-flex"><!-- Início seção home -->
<h2 class="col-md-12 text-center">Dados dos Clientes</h2>
<table class="table table-striped">
<thead>
<tr>
<th>nome</th>
<th>cpf</th>
<th>endereco</th>
<th>telefone</th>
<th>placa do carro</th>
<th>compania</th>
</tr>
</thead>
<tbody>
<tr id="app">
<td>
{{cliente.nome}}
</td>
<td v-for = "cliente in clientes">
{{cliente.cpf}}
</td>
<td v-for = "cliente in clientes">
{{cliente.endereco}}
</td>
<td v-for = "cliente in clientes">
{{cliente.telefone}}
</td>
<td v-for = "cliente in clientes">
{{cliente.placa}}
</td>
<td v-for = "cliente in clientes">
{{cliente.compania}}
</td>
<td>
<button type="submit" id="editar" class="btn btn-negative" @click="editClient(cliente)" >Editar</button>
</td>
</tr>
</tbody>
</table>
</section>
<div id="modal" v-if="showModal">
<div class="wrap">
<form action="" class="col-md-12 pane-body" id="cadastro-cliente">
<div class="container row justify-content-center">
<div class="row justify-content-center">
<h2 class="col-md-12 text-center">Cadastro do cliente</h2>
<div class="form-group col-md-12 justify-content-center">
<label for="nome">Nome Completo</label>
<input type="text" class="form-control" name="name" id="nome" v-model="client nome" placeholder="Nome Completo">
</div>
<div class="form-group col-md-6">
<label for="cpf">CPF</label>
<input type="text" class="form-control" name="cpf" id="cpf" v-model="client cpf" placeholder="CPF com 9 digitos">
</div>
<div class="form-group col-md-6">
<label for="endereco">Endereço</label>
<input type="text" class="form-control" name="endereco" v-model="client endereco" id="endereco" placeholder="ex: Rua Professor araujo, 12345">
</div>
<div class="form-group col-md-6">
<label for="telefone">Telefone</label>
<input type="text" class="form-control" name="telefone" id="telefone" v-model="client telefone" placeholder="ex: 539822232512">
</div>
<div class="form-group col-md-6">
<label for="placa">Placa do carro</label>
<input type="placa" class="form-control" name="placa" id="placa" v-model="client placa" placeholder="ex: asd-1234">
</div>
<div class="form-group col-md-6">
<label for="compania">Compania</label>
<input type="text" class="form-control" name="compania" id="compania" v-model="client compania" placeholder="ex: asd-1234">
</div>
</div>
<div class="justify-content-center pb-5">
<button type="button" id="salvar" class="btn btn-primary">Cadastrar</button>
<button type="button" class="btn btn-negative" @click="showModal=false">Fechar</button>
</div>
</div>
</form>
</div>
</div>
</body>
<footer><!--INICIO RODAPE-->
<footer class="mt-4">
<div class="container">
<div class="row d-flex">
<ul class="navbar-nav ml-auto col-md-1">
<li class="nav-item">
<a href="" class="nav-link">Home</a>
</li>
</ul>
<ul class="navbar-nav ml-auto col-md-1">
<li class="nav-item">
<a href="" class="nav-link">Empresa</a>
</ul>
<ul class="navbar-nav ml-auto col-md-1">
<li class="nav-item">
<a href="" class="nav-link">Planos</a>
</li>
</ul>
<div class="col-md-4 col text-light">
<p class="text-center">
Copyright© All rights reserve Outline Corretora.
</p>
<p class="text-center">
made by Alisson.
</p>
</div>
<div class="col-md-4 d-flex justify-content-end">
<a href="" class="btn align-self-center btn-outline-light">
<i class="fab fa-facebook"></i>
</a>
<a href="" class="btn align-self-center btn-outline-light ml-2">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="btn align-self-center btn-outline-light ml-2">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="btn align-self-center btn-outline-light ml-2">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
</footer><!--FIM RODAPE-->
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</html>