使用 vue.js 动态向表中添加行 - IT屋-程序员软件开发技术分享社区
使用 vue.js 动态向表中添加行
[英] Add rows to the table dynamically with the use of vue.js
本文介绍了使用 vue.js 动态向表中添加行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我学习了 vue.js，并用 HTML 和 CSS 创建了一个基本表单:
<头><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"/><身体><div id="应用程序"><div class="col-xs-5" id="mail_div"><label for="mail">邮件:</label><input v-model="mail" placeholder="电子邮件地址:" type="text" class="form-control" id="mail"> <div class="col-xs-5" id="date_div"><label for="date">日期:</label><div class='input-group date' id='datetimepicker1'><input v-model="date" placeholder="选择一个日期:" type='text' class="form-control"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<div class="col-xs-5" id="adress_div"><label for="adress">地址:</label><input v-model="adress" placeholder="点的地址:"type='text' class="form-control" id="adress">
<div class="col-xs-5" id="company_div"><label for="company">公司:</label><input v-model="company" placeholder="公司名称:"type='text' class="form-control" id="company">
<div class="col-xs-5" id="fliers_div"><label for="fliers">编号:</label><input v-model="fliers" placeholder="写数字:" type='number' class="form-control" id="fliers">
<div id="表格"><table class="table"><头><th scope="col">Mail</th><th scope="col">日期</th><th scope="col">地址</th><th scope="col">Company</th><th scope="col">Number</th></thead>
<tr><th scope="row">{{ mail }}</th><td>{{ 日期}}</td><td>{{地址}}</td><td>{{公司}}</td><td>{{传单}}</td></tr></tbody><div id="按钮"><div id="button_container_1"><button type="button" class="btn btn-primary">添加一行</button>
<div id="button_container_2"><button type="button" class="btn btn-success">下载</button>
<script src="https://dl.dropboxusercontent.com/s/3cml0fff7nbfpot/script.js"></script><script type="text/javascript">$(函数(){$('#datetimepicker1').datetimepicker({locale:'pl'});});
这是我的 .js 文件，到目前为止它没有做很多事情:
var app = new Vue({el: '#app',数据: {邮件:''，日期:''，地址:'',公司:''，传单:''}})此代码在我提交数据时动态更新表的行.我想要达到的效果应该让我按下蓝色按钮后输入更多行的数据.如何使用 vue.js 做到这一点?我在 vue.js 中找到了一些关于动态表的教程，但我一直无法找到适合我的案例的易于掌握的解决方案.
解决方案
您应该进行以下更改:
在 data 属性中声明一个数组(我们称之为 rowData)
在methods:中声明一个方法(我们称之为addItem)
在方法内部，从属性中填充一个 javascript 对象(邮件、日期、地址)
将对象推送到 rowData 数组中并清除模型属性
var app = new Vue({el: '#app',数据: {邮件:''，日期:''，地址:'',公司:''，传单:'',rowData:[]//声明的数组},方法:{新增项目(){var my_object = {邮件:this.mail，日期:这个日期，地址:this.address，公司:this.company，传单:this.fliers};this.rowData.push(my_object)this.mail = '';this.date = '';this.address = '';this.company = '';this.fliers = '';}}})
然后像这样更新你的 html:
<tr v-for="item in rowData" >{{ item.mail }} <td>{{ item.date }}</td><td>{{ item.adress }}</td><td>{{ item.company }}</td><td>{{ item.fliers }}</td></tr>每次向 rowData 数组推送一个新对象时，VueJs 都会自动检测并渲染表格中的新行.
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.
这篇关于使用 vue.js 动态向表中添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
