My Personnel table is connected to an array of objects from VueJs. The last column in the table has an edit button for each record.
I want to display a modal popup when the edit button is clicked, where the textboxes are linked to the personnel properties I wish to modify. Upon clicking the save button on the modal popup, it should update both the table and the data source.
I'm currently struggling with passing the object or even just the key to the component so I can load the data or link the edited object to my textboxes.
JS
var app = new Vue({
el: '#my-app',
data: {
personnels: [
{
id: 1,
firstName: 'Billy',
lastName: 'Bob',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315353715a54465d1f525e5c">[email protected]</a>'
},
// Additional personnel objects here
]
},
methods: {
showPersonnelEditor: function () {
// How can 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">
// Form fields for editing personnel information
</div>
<div class="modal-footer">
oh mah foot
</div>
</div>
</div>
</div></personnel-editor>