Question

这是我的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后在本地主机上打开它时，单击蓝色按钮后它不会在表中插入任何行。当我只打开.html文件（没有Flask）时，相同的功能将起作用，当然，请更改script.js参考。即使按下按钮，我也看不到控制台中的任何错误，因此我认为按钮属性不是问题。您还可以看到按下按钮后表单中的值消失了。该按钮有效，因此我认为我应该更改Vue.js组件中的某些内容，但我不知道该怎么做。

Answer 1

我已经有一个可行的解决方案。我放弃了使用“ {{...}}”语法，该语法与Flask冲突，而是将我的“ item。（...）”组件放在“ v-text”标记中。

在Flask中使用时，动态表不会更新，但在其他情况下则可以正常工作

1 个答案: