这个问题在这里已有答案：
这是我的HTML代码
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="{{url_for('static', filename='login.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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组件中的东西，但我不知道是什么。
我已经有了一个有效的解决方案我已经使用“{{...}}”语法抛弃，这与Flask冲突并将“item。（...）”组件放在“v-text”标签中。