2次元配列にした場合の表示について。(Vue.js)

Question

Vue.jsを勉強しています。
2次元配列のjson dataを表示したいですが、変数名を使って表示ができません。
Error内容は下記なので id変数がないようです。
＞ Error: TypeError: Cannot read property 'id' of null

問題点が理解できていないので対応方法が検討できていません。
1. jsonの構造が悪いのでVueでは対応できない。
2. Vueの書き方が間違っている。

下記のjson構造が悪いのでしょうか。それともVueの書き方が悪いのでしょうか。

<div id="app">
            <div>
                <template v-for="(row, idx) in rows">
                       {{idx}} / {{row.id}} <br>
                </template>
            </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
                "rows": [
                            {
                                'id': "P1",
                                "title": 1
                            },
                            {
                                "id": "P2",
                                "title": 2
                            },
                            {
                                "id": "P3",
                                "title": 3
                            },
                            null,
                            null

                ]
  }
}); // new Vue
</script>

Answer 1

                            null,
                            null

これのせいですね。rowがnullになるのでrow.idにはアクセスできません。

Comments

[gichorin]

こちらもそれに気がつきました。
ご指摘ありがとうございます。

Answer 2

オブジェクトの羅列をしてるのになんでnullがでてくるのでしょうか？
nullを取っ払うか、{}に変えてください

Comments

[gichorin]

こちらもそれに気がつきました。
ご指摘ありがとうございます。