【发布时间】：2019-02-12 17:34:35
【问题描述】：
这是我的 HTML 代码
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="{{url_for('static', filename='login.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
<div id="app">
<div class="col-xs-5" id="mail_div">
<label for="mail">Mail:</label>
<input v-model="mail" placeholder="Adres e-mail:" type="text" class="form-control" id="mail">
</div>
<div class="col-xs-5" id="date_div">
<label for="date">Data:</label>
<div class='input-group date' id='datetimepicker1'>
<input v-model="date" placeholder="Wybierz datę:" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-5" id="adress_div">
<label for="adress">Adres:</label>
<input v-model="adress" placeholder="Podaj adres:"type='text' class="form-control" id="adress">
</div>
<div class="col-xs-5" id="company_div">
<label for="company">Firma:</label>
<input v-model="company" placeholder="Podaj firmę:"type='text' class="form-control" id="company">
</div>
<div class="col-xs-5" id="fliers_div">
<label for="fliers">Ulotki:</label>
<input v-model="fliers" placeholder="Wpisz liczbę ulotek:" type='number' class="form-control" id="fliers">
</div>
<div id="table">
<table class="table">
<thead>
<th scope="col">Mail</th>
<th scope="col">Data</th>
<th scope="col">Adres</th>
<th scope="col">Firma</th>
<th scope="col">Ulotki</th>
</thead>
<tbody>
{% for item in rowData %}
<tr>
<th scope="row">{{ item.mail }}</th>
<td>{{ item.date }}</td>
<td>{{ item.adress }}</td>
<td>{{ item.company }}</td>
<td>{{ item.fliers }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div id="button">
<div id="button_container_1">
<button type="button" class="btn btn-primary" @click="addItem">Dodaj dane</button>
</div>
<div id="button_container_2">
<button type="button" class="btn btn-success">Pobierz dane</button>
</div>
</div>
</div>
<script src="{{url_for('static', filename='script.js')}}"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({locale:'pl'});
});
</script>
</body>
还有我的 script.js
var app = new Vue({
el: '#app',
template:'',
data: {
mail:'',
date:'',
adress:'',
company:'',
fliers:'',
rowData:[]
},
methods:{
addItem(){
var my_object = {
mail:this.mail,
date:this.date,
adress:this.adress,
company:this.company,
fliers:this.fliers
};
this.rowData.push(my_object)
this.mail = '';
this.date = '';
this.adress = '';
this.company = '';
this.fliers = '';
}
}
})
当我在运行 Flask 后在 localhost 上打开它时，单击蓝色按钮后它不会在表中插入任何行。当我只打开 .html 文件（没有 Flask）时，同样的功能也有效，当然，随着 script.js 参考的变化。即使我按下按钮，我在控制台中也看不到任何错误，所以我认为这不是按钮属性的问题。您还可以看到，按下按钮后，表单中的值消失了。该按钮有效，所以我认为我应该更改 Vue.js 组件中的某些内容，但我不知道是什么。
【问题讨论】：
-
您可以在此处粘贴正确的代码后确认一下吗？我只是复制了这两个代码并尝试在将 ref 删除到 login.js 并直接链接脚本 js 后在浏览器中运行......它似乎抛出错误
-
我真的很困惑.... for 循环不应该在
v-for中吗？ {% 语法 %} 是什么？？？ -
我会试着解释一下。我已经检查了这个，它确实不起作用。起作用的是稍微不同的代码，它使用了 v-for。但是 v-for 显然不能与 Flask 的 Jinja 一起使用，从而导致致命错误。这种语法帮助我避免了致命错误，但仍然没有给出正确的结果。所以澄清一下，这段代码显然应该在 Flask 中运行，在运行 app.py 并在 localhost 上登录之后。
标签： javascript flask vue.js