VueJS - 对 lodash 创建的 CountBy 数组进行排序答案

【问题标题】：VueJS - Sorting an CountBy Array created by lodashVueJS - 对 lodash 创建的 CountBy 数组进行排序
【发布时间】：2017-11-22 04:54:09
【问题描述】：

得到以下 .json：

[{
"STATUS": "0500",
"POSID": "..."
},
{
"STATUS": "1500",
"POSID": "..."
},
{
"STATUS": "0500",
"POSID": "..."
}]

通过 lodash 中的 countBy 计算值：

  countData (data) {
    return _.countBy(_.map(this.data, function (d) {
      return d.status
    }))
  }

生成了一个表格，其中显示了我的状态编号和计数：

 <tr v-for="(value, key) in countData">
   <td>{{ key }}</td>
   <td>{{ value }}</td>
 </tr>

现在我想通过值对其进行排序。

我怎样才能做到这一点？

【问题讨论】：

标签： vue.js lodash

【解决方案1】：

看起来countData 已经是一个计算属性，所以如果你需要保留它，你可以从另一个计算属性（如this.countData）中引用它，它应该提供结果的排序版本以进行演示。

例如，

computed: {
  countData () { ... },
  sortedCountData () {
    // this.countData looks something like: {'0500': 1, ...}
    return Object.keys(this.countData)
      .sort((i, j) => this.countData[j] - this.countData[i])
      .map(key => ({ key, value: this.countData[key] }));
  },
}

那么您应该更新您的标记，以便 v-for 改为来自 sortedCountData。

如果你不需要保留countData，你也可以在那里进行排序。

【讨论】：

我必须命名 tds 是否正确：{{ value.key }} {{ value.value }} ？跨度>
是的，没错——因为sortedCountData 是一个正确的数组并且不再是一个对象（由lodash countBy 调用返回），每个v-for 迭代的项目也是一个对象，所以你需要索引到 key 和 value 属性。

【解决方案2】：

您可以在渲染之前对数组进行排序。或者，您也可以使用 css 来执行此操作。

<tbody style="display:flex;flex-direction:column"> 
// <tbody> or <table> if parent is <table> tag 
  <tr v-for="(value, key) in countData" style="order:{{value}}">
  <td>{{key}}</td>
  <td>{{value}}</td>
  </tr>
</tbody>

你需要在 td 上给定宽度，以防它被扭曲

【讨论】：

- style="order:{{ value }}"：属性内的插值已被移除。请改用 v-bind 或冒号简写。例如，使用
代替
。 -> 但也不行。