This content is from my online shop.
getters: {
getFormattedUsers (state) {
state.users.forEach(v => {
v.fullname = `${capitalize(v.fname)} ${capitalize(v.lname)}`
v.created_from_now = moment(v.created_at).fromNow()
v.approve_button = `<button @click="openApproveModal" class="btn btn-primary">Approve</button>`
})
return state.users
}
}
When the component is mounted, it does the following:
async mounted () {
await this.initializeUsers()
$('#dataTable').DataTable({
data: this.getFormattedUsers(),
columns: [
{data: 'fullname'},
{data: 'username'},
{data: 'is_approved'},
{data: 'created_from_now'},
{data: 'approve_button'}
]
})
}
If you click on the Approve Button,
methods: {
openApproveModal (id) {
console.log('Approved!')
}
}
However, when tested, the function did not execute as expected.
Here is a representation of what the table in my component looks like:
<table class="table table-bordered" id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Status</th>
<th>Registration Date</th>
<th width="5">Action</th>
</tr>
</thead>
</table>