I need assistance with implementing sorting functionality in a Vue.js table component. Currently, the sorting mechanism is working fine on the first click of the th item, but it fails to sort the items on subsequent clicks.
const columns =
[{
name: 'Type',
key: 'type',
sortOrder: 1,
callback: function(item) {
if(item.type === 'issue')
return '<i class="fa fa-bars"></i> I-'+item.id;
else
return '<i class="fa fa-check-square-o"></i> R-'+item.id;
}
},
{
name: 'Name',
key: 'name',
sortOrder: 1
},
{
name: 'Created On',
key: 'created_at',
sortOrder: 1
},
{
name: 'Due Date',
key: 'due_date',
sortOrder: 1
},
{
name: 'Priority',
key: 'priority',
sortOrder: 1
},
{
name: 'Assigned To',
key: 'email',
sortOrder: 1
},
{
name: 'Severity',
key: 'severity',
sortOrder: 1
},
{
name: 'Workflow',
key: 'workflow',
sortOrder: 1
}];
const data = [{
id: 81,
name: "a",
workflow: "backlog",
created_at: "1",
user_id: 1,
due_date: "04:09:192016-08-06",
severity: "se",
priority: "1",
type: "1",
email: "<a href='/cdn-cgi/l/email-protection' class='__cf_email__' data-cfemail='3e4d5a585a4d7e59535f5752105d5153'>[email protected]</a>"
}, {
id: 83,
name: "Add files or images",
workflow: "deployed",
created_at: "2016-08-01 03:09:19",
user_id: 5,
due_date: "2016-08-06",
severity: "Major",
priority: "1",
type: "issue",
email: "<a href='/cdn-cgi/l/email-protection' class='__cf_email__' data-cfemail='fd89988e89bd9a909c9491d39e9290'>[email protected]</a>"
}];<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js'></script>
<script src='https://cdn.jsdelivr.net/lodash/4/lodash.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css' />
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'
</head>
<body>
<script type='text/x-template' id='testnetic-table'>
<input type='text' v-model='searchKey'>
<table class='table table-hover table-light table-responsive'>
<thead>
<tr>
<th v-for='item in columns'
@click='sortBy($index)'>
{{ item.name | capitalize}}
<i class='fa' :class='item.sortOrder > 0 ? 'fa-sort-desc' : 'fa-sort-asc''></i>
</th>
</tr>
</thead>
<tbody>
<tr v-for='item in data
| filterBy searchKey
| orderBy sortKey columns[$index].sortOrder'
>
<td v-for='cell in columns'>
{{{ display(item,cell.key,$index)}}}
</td>
</tr>
</tbody>
</table>
</script>
<div id='test'>
<testnetic-table
:columns='columns'
:data='data'
></testnetic-table>
</div>
</body>
</html>