【vue.js】v-forで連想配列のインデックス番号を取得する方法

課題

vue.js(v3)で連想配列を扱うが場面あり、データの数を連番で出力したくなった。

前提

例えばこういう連想配列があったとして、

hoge.vue

let obj ={
    'key1':val1, //1番目
    'key2':val2, //2番目
    'key3':val3 //3番目
}

これらをテーブル形式で出力したいのでvue.jsのv-forで以下のように書いた。

hoge.vue

<table>
    <tr v-for="(Arrays,index) in obj">
        <tbody>
            <tr>
                <td>{{ index }}</td> // key1,2,3が出力
                <td>{{ Arrays }}</td> // val1,2,3が出力
            </tr>
        </tbody>
    </tr>
</table>

ここにthを追加してデータの数を連番で出力したくなった。

hoge.vue

<table>
    <tr v-for="(Arrays,index) in obj">
        <tbody>
            <tr>
                <th>データの数を連番で出力したい</th> // 1,2,3として出力したい
                <td>{{ index }}</td> // key1,2,3が出力
                <td>{{ Arrays }}</td> // val1,2,3が出力
            </tr>
        </tbody>
    </tr>
</table>

しかし連想配列は通常の配列（一次元配列）と違ってインデックスにキー（文字列）が使用されているので、数字として取れない。

解決策

v-forの第三引数に count（名前は何でもOK） を追加することで解決しました。

hoge.vue

<table>
    <tr v-for="(Arrays,index,count) in obj">
        <tbody>
            <tr>
                <th>{{ count+1 }}</th> // 連番1,2,3が出力
                <td>{{ index }}</td> // key1,2,3が出力
                <td>{{ Arrays }}</td> // val1,2,3が出力
            </tr>
        </tbody>
    </tr>
</table>

これで連想配列内のデータのインデックス番号を取得することが出来ました。
ちなみにインデックス番号は0始まりなのでth内では「count+1」としています。

ありがとうv-for

異なる配列から連想配列を作成した後に今回の課題に直面したので、v-forの便利さに感動しました。

参考

v-for をオブジェクトに適用する リストレンダリング | Vue.js