我已从Vue JS v1切换到v2,我注意到orderBy过滤器不再起作用。
我用lodash代替了它。
我遵循了这样的答案:
https://stackoverflow.com/a/40512856/7804813
但是,图标和排序不起作用。我错过了什么吗?
我要从以下地方迁移:
var app = new Vue({
el: '#app',
data: {
activeColumn: {},
columns: [
{name: 'deviceinfo', order: 1},
{name: 'present', order: 1},
{name: 'agent', order: 1},
],
colTitles: {'deviceinfo':'Device Info', 'present':'Present', 'agent':'Agent'},
items: [
{ deviceinfo: 'ddd', present: 'true', agent: 'eee' },
{ deviceinfo: 'bbb', present: 'false', agent: 'ddd' },
{ deviceinfo: 'ccc', present: 'true', agent: 'aaa' },
{ deviceinfo: 'aaa', present: 'false', agent: 'ccc' },
{ deviceinfo: 'eee', present: 'true', agent: 'bbb' },
]
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
<table border="1" style="width:100%">
<thead>
<tr>
<th v-for="column in columns"
@click="activeColumn = column"
:class="{active: column == activeColumn}"
>
{{ colTitles[column.name] }}
<span
@click="column.order = column.order * (-1)"
class=" {{ column.order > 0 ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up' }}"
v-show="column == activeColumn">
</span>
<span class="glyphicon glyphicon-sort" v-show="column != activeColumn"></span>
</th>
</tr>
</thead>
<tr v-for="item in items | orderBy activeColumn.name activeColumn.order">
<td>{{ item.deviceinfo }}</td>
<td>{{ item.present }}</td>
<td>{{ item.agent }}</td>
</tr>
</table>
<pre> Active Column: {{ activeColumn | json }}</pre>
</div>
https://jsfiddle.net/Lgp2oahu/1/
到
var app = new Vue({
el: '#app',
data: {
activeColumn: {},
columns: [
{name: 'deviceinfo', order: 1},
{name: 'present', order: 1},
{name: 'agent', order: 1},
],
colTitles: {'deviceinfo':'Device Info', 'present':'Present', 'agent':'Agent'},
items: [
{ deviceinfo: 'ddd', present: 'true', agent: 'eee' },
{ deviceinfo: 'bbb', present: 'false', agent: 'ddd' },
{ deviceinfo: 'ccc', present: 'true', agent: 'aaa' },
{ deviceinfo: 'aaa', present: 'false', agent: 'ccc' },
{ deviceinfo: 'eee', present: 'true', agent: 'bbb' },
]
},
computed:
{
sort: function(){
return _.orderBy(this.items, 'activeColumn.name', 'activeColumn.order');
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/lodash@4.16.0/lodash.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
<table border="1" style="width:100%">
<thead>
<tr>
<th v-for="column in columns"
@click="activeColumn = column"
:class="{active: column == activeColumn}"
>
{{ colTitles[column.name] }}
<span
@click="column.order = column.order * (-1)"
class=" column.order > 0 ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up'"
v-show="column == activeColumn">
</span>
<span class="glyphicon glyphicon-sort" v-show="column != activeColumn"></span>
</th>
</tr>
</thead>
<tr v-for="item in sort">
<td>{{ item.deviceinfo }}</td>
<td>{{ item.present }}</td>
<td>{{ item.agent }}</td>
</tr>
</table>
<pre> Active Column: {{ activeColumn | json }}</pre>
</div>
答案 0 :(得分:0)
是的,
将计算的sort()更改为此:
sort: function() {
return _.orderBy(this.items, this.activeColumn.name, this.activeColumn.order);
}