我希望通过单击#app中的Editar按钮，将打开模式，但根本不会打开！。我不知道我的js逻辑错误还是我的html错误！
当我尝试对Modal使用某些功能时，它们继续不起作用。 我需要为解决这个问题做些什么？
JavaScript代码已完成
完整的HTML： https://pastebin.com/9GGbQ7WS
<!DOCTYPE html>
<html>
<head>
<title>directories</title>
<meta charset="utf-8">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/photon.css">
<link rel="stylesheet" href="css/style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- HTML5Shiv -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- Estilo customizado
<link rel="stylesheet" type="text/css" href="css/estilo.css">-->
<!-- Electron Javascript -->
</head>
<body>
<div class="window">
<header class="toolbar toolbar-header">
<h1 class="title"></h1>
<div class="toolbar-actions">
<div class="btn-group">
<button class="btn btn-default">
<span class="icon icon-home"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-folder"></span>
</button>
<button class="btn btn-default active">
<span class="icon icon-cloud"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-popup"></span>
</button>
<button class="btn btn-default">
<span class="icon icon-shuffle"></span>
</button>
</div>
<button class="btn btn-default">
<span class="icon icon-home icon-text"></span>
Filters
</button>
<button class="btn btn-default btn-dropdown pull-right">
<span class="icon icon-megaphone"></span>
</button>
</div>
</header>
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar">...</div>
<div class="pane">
<h2 class="col-md-12 text-center">
Creates a table to show customer data whit these infos:</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 v-for = "cliente in clientes">
{{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>
*********HERE IS THE BUTTON. IDONT KNOW THE ERROR*************
<td>
<button type="button" class="btn btn-negative" @click="editClient" >Editar</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="toolbar toolbar-footer">
*****************The modal that does not open when clicking into the button**************
<h1 class="title">Modal</h1>
</footer>
</div>
<div id="modal-template" class="modal">
<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">Salvar</button>
<button type="button" class="btn btn-negative" @click="showModal=false">Fechar</button>
<!--<button type="button" class="btn btn-negative" @click="showModal=false">Fechar</button>-->
</div>
</div>
</form>
</div>
</div>
</body>
***************JAVASCRIPT CODE*************
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script >
var read = require('read-file-utf8')
var loki = require('lokijs');
var db = new loki('db.json');
var data = read(__dirname+'/loki.json');
db.loadJSON(data);
window.vue = require('vue');
var clientes = db.getCollection('clientes');
console.log(db);
//inicio inicialização modal
Vue.component('modal', {
template: '#modal-template'
})// fim inicializção modal
new Vue({
el: '#app',
data: {
clientes: [],
showModal: false
},
mounted: function(){
this.clientes = clientes.data;
console.log(this.clientes);
},
methods:{
editClient:function(){
showModal: true
}
}
})
</script>
答案 0 :(得分：0)
您正在尝试在错误的范围内访问showModal。 （您缺少this）
this.showModal: true应该会做。
答案 1 :(得分：0)
解决的男孩！我使用引导程序创建了一个模态，但是缺少了jquery，然后使用了以下命令：npm install jquery --save， 下载jquery并在电子内部插入调用脚本。
<script> window. $ = window.jQuery = require ('jquery'); </ script>
紧接着，我使用了：
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3 + MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW / JmZQ5stwEULTy" crossorigin = "anonymous"> </ script>
调用引导程序库，它起作用了！