Question

我使用的是vue.js 2.x，根据documentation-orderby指令不再可用。

我不想再有一个.js库，但是，如果我可以使loDash正常工作，那我就可以了。我尝试了其他几次尝试（link，link）的javascript排序似乎都行不通。

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

我的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）：

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

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

让我知道您是否需要查看更多我的数组或任何其他代码。我真的很希望能够按列标题排序（目前，我还需要按其他7个标题排序）。

修改：

我也尝试过此操作（没有任何改变）：

return _.orderBy(vm.rowData, ['ItemType']);

Answer 1

_.orderBy不会对数组进行适当的更改，它会返回一个新数组，因此vm.rowData本身未排序，Vue不会对任何更改做出反应（因为没有任何更改）。即使_.orderBy确实改变了数组的位置，Vue仍然无法跟踪更改，因为它看不到数组访问（Vue的一个反应性陷阱，文档：https://vuejs.org/v2/guide/list.html#Caveats）。在这种情况下，您需要做的是：

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

那应该可行。

Answer 2

也许这样吗？

@click="sortBy('ItemType')"

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

按vue.js中的列标题排序

2 个答案: