Javascript 在vue.js中按列标题排序

我正在使用Vue 2.x，因此，

orderby

指令不再可用

我不希望有另一个JS库，但是如果我能让lodash工作，我想那就可以了。我尝试了其他几种JS排序的尝试（，），但似乎根本不起作用

但是，我希望能够单击一个表头值并根据该值进行排序

我的

rowData

数组是通过数据库调用填充的，它看起来像这样：

rowData:Array[79]
 0:Object
  ActiveDate:"06/25/2018"
  CountryId:10
  ExportedDate:""
  ExportedStatus:"0"
  Id:1751
  ItemType:"Condition Types"
  LogId:72843
  ModifiedDate:"06/25/2018"
  Name:"GenericNameGoesHere"
  ParentTable:"tableNameGoesHere"
  Region:"Home Office"
  Type:"CI"
  TypeId:123
  selectedExport:false

首先，我尝试按照ItemType属性进行排序。在

rowData

中，我有多个ItemType值（条件类型，医学参考，同义词，参考等）

在我的表格标题中，我有以下内容：

v-on:click="sortBy('ItemType')"

这就是我到目前为止所做的（由于ItemType是硬编码的，所以尚未使用sortKey）：

此时此刻，我没有看到任何排序。老实说，我不确定这是我的Vue代码还是lodash代码。

如果您需要查看我的数组或任何其他代码，请告诉我。我真的希望能够按列标题进行排序（目前我需要按其他7个标题进行排序）

编辑：

我也尝试过这个（没有改变任何事情）：

也许是这样

@click="sortBy('ItemType')"

sortBy (key) {
  this.rowData = _.orderBy(this.rowData, key, 'asc')
},

---

\uu.orderBy

不会就地改变数组，它会返回一个新数组，因此

vm.rowData

本身不会排序，Vue不会对任何更改做出反应（因为没有更改）。即使“

”.orderBy

对阵列进行了就地变异，Vue仍然无法跟踪更改，因为它看不到阵列访问（Vue的反应缺陷之一，文档：）。在这种情况下，您需要做的是：

sortBy: function (sortKey) {
    let vm = this;
    vm.$set(vm, 'rowData', _.orderBy(vm.rowData, ['ItemType'], ['asc']);
},

---

这应该行得通。

尝试将

return

添加到

sortBy

函数中。@hassaniam-这不起作用。我还参加了['asc']，但这也不起作用。请添加一个工作片段。@Hassaniam-我必须把一些东西放在一起。但是数组是动态填充的，因此它与来自DB的数组不同。

@click="sortBy('ItemType')"

sortBy (key) {
  this.rowData = _.orderBy(this.rowData, key, 'asc')
},

sortBy: function (sortKey) {
    let vm = this;
    vm.$set(vm, 'rowData', _.orderBy(vm.rowData, ['ItemType'], ['asc']);
},