Vue JS v-forを使用してオブジェクト配列からJSONキー値を取得するときのエラー

Question

JSONペイロード内のオブジェクトのリストをVue.jsを使用してテーブルに解析しようとしています。

私は作品を以下のコード、表の見出しを作成するために、配列の最初のオブジェクトから鍵を取りたいと正しい値を提供していますが、問題は、私はこのエラーメッセージ

にエラーメッセージが出続けるです

[Vue warn]: Error in render function: "TypeError: objectArray is null" 

(found in <Root>) 

HTML要素

<thead> 
    <tr> 
     <th v-for="(value, key) in objectArray[0]"> 
      {{ key }} 
     </th> 
    </tr> 
</thead> 

JSONペイロード

objectArray初めてヌルであり、アレイはないので

[ 
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" }, 
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" }, 
{ "field1": "value", "field2": "value", "field3": "value", "field4": "value", "field5": "value", "field6": "value", "field7": "value" } 
] 

var link = 'api/array'; 

new Vue ({ 
    el: '#app', 
    data: { 
     objectArray: null 
    }, 
    methods:{ 
     getObjectArray: function(){ 
      this.$http.get(link).then(function(response){ 
       this.objectArray = response.data; 
      }, function(error){ 
       console.log(error.statusText); 
      }); 
     } 
    }, 
    mounted: function() { 
     this.getObjectArray(); 
    } 
}); 

Answer 1

エラーオブジェクトを移入するVueのコードがあります。

<thead v-if='objectArray'> 
    <tr> 
     <th v-for="(value, key) in objectArray[0]"> 
      {{ key }} 
     </th> 
    </tr> 
</thead>