title: Add rows to the table dynamically with the use of vue.js
body: <p>I learn vue.js and I created a basic form in HTML and CSS:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"&gt;&lt;/script&gt;                       
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/&gt;
  &lt;link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="app"&gt;
  &lt;div class="col-xs-5" id="mail_div"&gt;
      &lt;label for="mail"&gt;Mail:&lt;/label&gt;
      &lt;input v-model="mail" placeholder="E-mail adress:" type="text" class="form-control" id="mail"&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-5" id="date_div"&gt;
      &lt;label for="date"&gt;Date:&lt;/label&gt;
      &lt;div class='input-group date' id='datetimepicker1'&gt;
      &lt;input v-model="date" placeholder="Pick a date:" type='text' class="form-control" /&gt;
      &lt;span class="input-group-addon"&gt;
          &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-5" id="adress_div"&gt;
      &lt;label for="adress"&gt;Adress:&lt;/label&gt;
      &lt;input v-model="adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress"&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-5" id="company_div"&gt;
      &lt;label for="company"&gt;Company:&lt;/label&gt;
      &lt;input v-model="company" placeholder="Company name:"type='text' class="form-control" id="company"&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-5" id="fliers_div"&gt;
      &lt;label for="fliers"&gt;Number:&lt;/label&gt;
      &lt;input v-model="fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers"&gt;   
  &lt;/div&gt;    
  &lt;div id="table"&gt;
  &lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;th scope="col"&gt;Mail&lt;/th&gt;
          &lt;th scope="col"&gt;Date&lt;/th&gt;
          &lt;th scope="col"&gt;Adress&lt;/th&gt;
          &lt;th scope="col"&gt;Company&lt;/th&gt;
          &lt;th scope="col"&gt;Number&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;{{ mail }}&lt;/th&gt;
            &lt;td&gt;{{ date }}&lt;/td&gt;
            &lt;td&gt;{{ adress }}&lt;/td&gt;
            &lt;td&gt;{{ company }}&lt;/td&gt;
            &lt;td&gt;{{ fliers }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="button"&gt;
      &lt;div id="button_container_1"&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Add a row&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="button_container_2"&gt;
          &lt;button type="button" class="btn btn-success"&gt;Download&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://dl.dropboxusercontent.com/s/3cml0fff7nbfpot/script.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      $(function () {
          $('#datetimepicker1').datetimepicker({locale:'pl'});
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And here's my .js file, which is not doing a lot so far:</p>
  
  <pre><code>var app = new Vue({
   el: '#app',
   data: {
    mail:'',
    date:'',
    adress:'',
    company:'',
    fliers:''
  }
  })
  </code></pre>
  
  <p>This code updates the row of the table dynamically when I submit data. The effect I want to achieve should let me enter the data for more rows after pressing the blue button. How to do this using vue.js? I've found some tutorials for dynamic tables in vue.js, but I haven't been able to found easy to grasp solutions for my case.</p>