0
vuejsテーブルコンポーネントで並べ替えを有効にしようとしていますが、行を並べ替えてソートしたところで、ソートの仕組みはクリックで初めてですが、テーブル内の項目はソートに失敗します。2回目の並べ替えを繰り返すことができません
var columns =
[{
\t name: 'Type',
\t 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;
}
},
{
\t name: 'Name',
\t key: 'name',
sortOrder: 1
},
{
\t name: 'Created On',
\t key: 'created_at',
sortOrder: 1
},
{
\t name: 'Due Date',
\t key: 'due_date',
sortOrder: 1
},
{
\t name: 'Priority',
\t key: 'priority',
sortOrder: 1
},
{
\t name: 'Assigned To',
\t key: 'email',
sortOrder: 1
},
{
\t name: 'Severity',
\t key: 'severity',
sortOrder: 1
},
{
\t name: 'Workflow',
\t key: 'workflow',
sortOrder: 1
}];
var data = [{
id: 81,
name: "a",
workflow: "backlog",
created_at: "1",
user_id: 1,
due_date: "04:09:19 \t 2016-08-06",
severity: "se",
priority: "1",
type: "1",
email: "[email protected]"
}, {
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: "[email protected]"
}];
Vue.config.debug= true;
Vue.component('testnetic-table', {
template: '#testnetic-table',
\t props: ['data', 'columns'],
data: function() {
return {
searchKey: '',
sortKey: ''
};
},
\t methods: {
sortBy: function(index) {
this.columns[index].sortOrder = this.columns[index].sortOrder * -1;
this.sortKey = this.columns[index].key;
},
display: function(item,key,index) {
if(this.columns[index].callback){
return this.columns[index].callback(item);
}
else
return item[key];
}
}
});
new Vue({
el: '#test',
data: function() {
return {
columns: columns,
data: data
}
}
});<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">
\t <input type="text" v-model="searchKey">
\t <table class="table table-hover table-light table-responsive">
\t \t <thead>
\t \t \t <tr>
\t \t \t \t <th v-for="item in columns"
\t \t \t \t \t \t @click="sortBy($index)">
\t \t \t \t \t \t {{ item.name | capitalize}}
\t \t \t \t \t <i class="fa" :class="item.sortOrder > 0 ? 'fa-sort-desc' : 'fa-sort-asc'"></i>
\t \t \t \t </th> \t \t \t
\t \t \t </tr>
\t \t </thead>
\t \t <tbody>
\t \t \t <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>
\t \t </tbody>
\t </table>
</script>
<div id="test">
<testnetic-table
:columns="columns"
:data="data"
></testnetic-table>
</div>
</body>
</html>
'列[$インデックス] .sortOrder'行から来ている、いない列の' $のindex' 。 –