VueJS - ガットJSONとは.json以下の個別の値

Question

ガットをカウントするために、テーブルを作成したい：

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

は私がVUE-jsから2列の中にテーブルを作成します。 最初の列にはSTATUSが表示され、2番目の列にはその状態の.json要素の数がカウントされます。

出力は、テーブルに、そのようにする必要があります：

Status Count 
0500  2 
1500  1 

は現在、私はちょうどV-のための完全なテーブルを書いている：「

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

はフィルタでそれをしようとしましたが、私は勝ちましたそれを達成する。

お手伝いできますか？

Answer 1

をして、今それをやった：

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

ありがとうございました!! :)

Answer 2

このロジックでは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