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

时间:2017-11-21 23:45:20

标签: json html-table vue.js

关注.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>

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

你可以帮帮我吗?

2 个答案:

答案 0 :(得分:0)

<强>已更新

这个逻辑可以直接用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

答案 1 :(得分:0)

现在用:

  <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
    }))

谢谢!! :)