Vue.js VueJS-对lodash创建的CountBy数组进行排序

获取了以下.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>

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

我怎样才能做到这一点

看起来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，也可以在那里进行排序。

您可以在渲染之前对数组进行排序。或者，您也可以使用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或冒号速记。例如，使用，而不是但是也不行。我必须给tds命名：{{value.key}{{{value.value}}对吗？是的，这是正确的，因为sortedCountData是一个正确的数组，不再是lodash countBy调用返回的对象，v-for迭代的每个项也是一个对象，因此，您需要索引键和值属性。