我有一个Personnel表绑定到来自VueJs的对象数组。表格的最后一列是用于编辑每条记录的按钮。
我想在单击编辑按钮时显示模式弹出窗口,并将文本框绑定到我要编辑的人员的属性。当单击模态弹出窗口上的保存按钮时,它应该更新表格和数据源。
但是我坚持传递对象甚至只是组件的键,所以我可以加载数据或将编辑过的对象绑定到我的文本框中。
JS
var app = new Vue({
el: '#my-app',
data: {
personnels: [
{
id: 1,
firstName: 'Billy',
lastName: 'Bob',
email: 'bb@kewl.com'
},
{
id: 2,
firstName: 'Mike',
lastName: 'Coilers',
email: 'mco@kewl.com'
},
{
id: 3,
firstName: 'Fred',
lastName: 'Just',
email: 'freju@gmail.com'
},
{
id: 4,
firstName: 'Tori',
lastName: 'Drury',
email: 'smstua@gmail.com'
}
]
},
methods: {
showPersonnelEditor: function () {
// how do i pass data to the personnelEditor component?
}
}
});
Vue.component('personnel-editor', {
prop: ['personnel']
});
HTML
<div id="my-app">
<table classs="table" width="100%">
<tr>
<th>
Id
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email
</th>
<th>
Actions
</th>
</tr>
<tr v-for="personnel in personnels">
<td>
{{ personnel.id }}
</td>
<td>
{{ personnel.firstName }}
</td>
<td>
{{ personnel.lastName }}
</td>
<td>
{{ personnel.email }}
</td>
<td>
<button v-on:click="showPersonnelEditor">Edit</button>
</td>
</tr>
</table>
<personnel-editor inline-template><div class="modal fade" >
<div class="modal-dialog">
<div class="modal-header">
header
</div>
<div class="modal-content">
<div class="form-group row">
<div class="col-lg-12">
<label>Id</label>
<input type="text" v-model="personnel.Id" />
</div>
<div class="form-group row">
<div class="col-lg-12">
<label>First Name</label>
<input type="text" v-model="personnel.firstName" />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-12">
<label>Last Name</label>
<input type="text" v-model="personnel.lastName" />
</div>
</div>
<div class="form-group row">
<div class="col-lg-12">
<label>Email</label>
<input type="text" v-model="personnel.Email" />
</div>
</div>
</div>
<div class="modal-footer">
oh mah foot
</div>
</div>
</div>
</div></personnel-editor>
答案 0 :(得分:3)
您可以尝试:
<button v-on:click="showPersonnelEditor(personnel)">Edit</button>
然后在showPersonnelEditor方法中:
showPersonnelEditor: function (personnel) {
this.selectedPersonnel = personnel; //make sure to declare selectedPersonnel in data
}
最后在你的html模板中:
<personnel-editor inline-template :personnel=selectedPersonnel><div class="modal fade" >
Hote它有帮助。
您可以在模式关闭时发出事件,可以使用按钮或任何其他已关闭的事件,具体取决于您的实现。 这是用于发出en事件的代码示例:
whenModalClosedMethod() {
this.$emit('personnel-edited', personnel);
}
然后在你的模板中:
<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">
然后在根组件中添加一个方法:
updatePersonnel: function(personnel) {
//look for the correct entry by id in your personnels array and update it
}