VueJS - 获得了JSON并且想要创建一个表来计算不同的值

Question

关注.json：

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

我想在vue-js中创建一个包含2列的表。 第一列显示STATUS，第二列显示具有该状态的.json元素的数量。

输出应该是这样的，在表格中：

Status    Count 
0500      2 
1500      1

目前我只是用v-for编写完整的表格：

<tr v-for="data in data">
  <td>{{ data.Status }}</td>
</tr>

尝试使用过滤器，但我没有完成它。

你可以帮帮我吗？

Answer 1

<强>已更新

这个逻辑可以直接用javascript实现。 Vue.js不是也不应该对此负责。 您可以使用lodash中的_.groupBy或编写自己的实现。

这是可能的解决方案之一：

computed: {
   preparedData(){
      return _.groupBy(this.data, 'STATUS');
   }
}

然后在模板中使用preparedData代替data。

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

查看此处的示例：https://codepen.io/probil/pen/MOVMQj?editors=1010

Answer 2

现在用：

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

和

  countData (jitcalls) {
    return _.countBy(_.map(this.jitcalls, function (d) {
      return d.ANLIE
    }))

谢谢!! ：）