this is my HTML code
<!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>
And my 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 = '';
}
}
})
When I open this on localhost after running Flask, it doesn't insert any rows in the table after clicking blue button. The same feature works when I just open the .html file (no Flask), of course with the change of script.js reference. I see no errors in the console, even when I press the button, so I don't think it's an issue with button properties. You can also see that the value in the form disappears after pressing the button. The button works, so I think that I should change something in Vue.js components, but I don't know what.
