[英]Add rows to the table dynamically with the use of vue.js
我学习了 vue.js,并用 HTML 和 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>
这是我的 .js 文件,到目前为止它没有做很多事情:
var app = new Vue({
el: '#app',
data: {
mail:'',
date:'',
adress:'',
company:'',
fliers:''
}
})
当我提交数据时,此代码会动态更新表的行。 我想要达到的效果应该让我按下蓝色按钮后输入更多行的数据。 如何使用 vue.js 做到这一点? 我在 vue.js 中找到了一些关于动态表的教程,但是我一直无法为我的案例找到易于掌握的解决方案。
您应该进行以下更改:
在data
属性中声明一个数组(我们称之为rowData
)
在methods:
声明一个methods:
我们称之为addItem
)
在方法内部,从属性(邮件、日期、地址)填充一个 javascript 对象
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 = '';
}
}
})
<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>
每次向rowData
数组推送一个新对象时,VueJs 都会自动检测并渲染表中的新行。
要使用的基本内容将是 Vue 对象创建中的方法部分、v-for 用法和添加到按钮的 @click 操作。
<!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>
您可能想查看这些真实示例。 他们创造了与你相似的东西。
HTML
<div id="form-message">
<button class="btn btn-default" @click="addNewMessage">New Message</button>
<template v-for="message in messages">
<input type="text" v-model="message.DestinationNumber" class="form-control">
<textarea rows="3" v-model="message.TextDecoded" class="form-control">
</textarea>
</template>
<button class="btn btn-success" @click.prevent="submitForm">Submit</button>
<pre>{{messages | json}}</pre>
</div>
JS
var newSingleMessage = new Vue({
el: '#form-message',
data: {
messages: [
{
DestinationNumber: '',
TextDecoded: ''
}
],
submitted:false
},
methods: {
addNewMessage: function(){
this.messages.push({
DestinationNumber: '',
TextDecoded: ''
});
},
submitForm: function(e) {
console.log(this.messages);
this.$http.post('api/outbox', {messages:this.messages})
.then(function(response){
//handle success
console.log(response);
}).error(function(response){
//handle error
console.log(response)
});
this.messages = [{ DestinationNumber: '', TextDecoded: '' }];
this.submitted = true;
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.