javascript 使用 vue.js 动态向表中添加行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52211682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-29 09:52:19 来源:igfitidea点击:
Add rows to the table dynamically with the use of vue.js
提问by Piotr Koller
I learn vue.js and I created a basic form in HTML and CSS:
我学习了 vue.js，并用 HTML 和 CSS 创建了一个基本表单：
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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:
这是我的 .js 文件，到目前为止它没有做很多事情：
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.
当我提交数据时，此代码会动态更新表的行。我想要达到的效果应该让我按下蓝色按钮后输入更多行的数据。如何使用 vue.js 做到这一点？我在 vue.js 中找到了一些关于动态表的教程，但我一直无法为我的案例找到易于掌握的解决方案。
回答by gijoe
You should make the following changes:
您应该进行以下更改：
Declare an array in the
dataproperty (lets call itrowData)Declare a method in
methods:(lets call itaddItem)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
在
data属性中声明一个数组（让我们称之为rowData）在
methods:（让我们调用它addItem）中声明一个方法在方法内部，从属性（邮件、日期、地址）填充一个 javascript 对象
- 推送 rowData 数组中的对象并清除模型属性
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:
- 然后像这样更新你的html：
<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 rowDataarray, VueJs will automatically detect and render a new row in the table.
每次向rowData数组中推送一个新对象时，VueJs 都会自动检测并渲染表中的新行。
回答by Kamil Leis
Basic things to use will be methods section in Vue object creation, v-for usage and @click action added to button.
要使用的基本内容将是 Vue 对象创建中的方法部分、v-for 用法和添加到按钮的 @click 操作。
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
