I learn vue.js and I created a basic form in HTML and CSS:
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<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="E-mail adress:" type="text" class="form-control" id="mail">
</div>
<div class="col-xs-5" id="date_div">
<label for="date">Date:</label>
<div class='input-group date' id='datetimepicker1'>
<input v-model="date" placeholder="Pick a date:" 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">Adress:</label>
<input v-model="adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress">
</div>
<div class="col-xs-5" id="company_div">
<label for="company">Company:</label>
<input v-model="company" placeholder="Company name:"type='text' class="form-control" id="company">
</div>
<div class="col-xs-5" id="fliers_div">
<label for="fliers">Number:</label>
<input v-model="fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers">
</div>
<div id="table">
<table class="table">
<thead>
<th scope="col">Mail</th>
<th scope="col">Date</th>
<th scope="col">Adress</th>
<th scope="col">Company</th>
<th scope="col">Number</th>
</thead>
<tbody>
<tr>
<th scope="row">{{ mail }}</th>
<td>{{ date }}</td>
<td>{{ adress }}</td>
<td>{{ company }}</td>
<td>{{ fliers }}</td>
</tr>
</tbody>
</table>
</div>
<div id="button">
<div id="button_container_1">
<button type="button" class="btn btn-primary">Add a row</button>
</div>
<div id="button_container_2">
<button type="button" class="btn btn-success">Download</button>
</div>
</div>
</div>
<script src="https://dl.dropboxusercontent.com/s/3cml0fff7nbfpot/script.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({locale:'pl'});
});
</script>
</body>
And here's my .js file, which is not doing a lot so far:
var app = new Vue({
el: '#app',
data: {
mail:'',
date:'',
adress:'',
company:'',
fliers:''
}
})
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.
You should make the following changes:
Declare an array in the data property (lets call it rowData)
Declare a method in methods: (lets call it addItem)
Inside the method, populate a javascript object from the attributes
(mail, date, address)
- Push the object in the rowData array and clear the model attributes
var app = new Vue({
el: '#app',
data: {
mail:'',
date:'',
adress:'',
company:'',
fliers:'',
rowData:[] //the declared array
},
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 = '';
}
}
})
- Then update your html like this:
<tr v-for="item in rowData" >
<th scope="row">{{ item.mail }}</th>
<td>{{ item.date }}</td>
<td>{{ item.adress }}</td>
<td>{{ item.company }}</td>
<td>{{ item.fliers }}</td>
</tr>
Every time you push a new object to the rowData array, VueJs will automatically detect and render a new row in the table.
Basic things to use will be methods section in Vue object creation, v-for usage and @click action added to button.
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<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="current.mail" placeholder="E-mail adress:" type="text" class="form-control" id="mail">
</div>
<div class="col-xs-5" id="date_div">
<label for="date">Date:</label>
<div class='input-group date' id='datetimepicker1'>
<input v-model="current.date" placeholder="Pick a date:" 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">Adress:</label>
<input v-model="current.adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress">
</div>
<div class="col-xs-5" id="company_div">
<label for="company">Company:</label>
<input v-model="current.company" placeholder="Company name:"type='text' class="form-control" id="company">
</div>
<div class="col-xs-5" id="fliers_div">
<label for="fliers">Number:</label>
<input v-model="current.fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers">
</div>
<div id="table">
<table class="table">
<thead>
<tr>
<th scope="col">Mail</th>
<th scope="col">Date</th>
<th scope="col">Adress</th>
<th scope="col">Company</th>
<th scope="col">Number</th>
</tr>
</thead>
<tbody>
<tr v-for="el in arr">
<td>{{ el.mail }}</td>
<td>{{ el.date }}</td>
<td>{{ el.adress }}</td>
<td>{{ el.company }}</td>
<td>{{ el.fliers }}</td>
</tr>
</tbody>
</table>
</div>
<div id="button">
<div id="button_container_1">
<button type="button" class="btn btn-primary" @click="addCurrent">Add a row</button>
</div>
<div id="button_container_2">
<button type="button" class="btn btn-success">Download</button>
</div>
</div>
</div>
<script type="text/javascript">var app = new Vue({
el: '#app',
data: {
current:{mail: '',
date: '',
adress:'',
company:'',
fliers:''},
arr:[]
},
methods: {
addCurrent() {
this.arr.push(JSON.parse(JSON.stringify(this.current)));
}
}
})</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({locale:'pl'});
});
</script>
</body>
