Vue JS 用 lodash 替换 orderBy 过滤器

Question

我已经从 Vue JS v1 切换到 v2，我注意到 orderBy 过滤器不再起作用了。

我用 lodash 替换了它。

我遵循了这个 SO 答案：

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>

https://jsfiddle.net/Lgp2oahu/2/

Answer 1

是的，你做到了，

将计算的 sort() 更改为：

sort: function() {
  return _.orderBy(this.items, this.activeColumn.name, this.activeColumn.order);
}