title: Vue JS Error when using v-for to get JSON key values from an object array
body: <p>I am trying to parse a list of objects in a JSON payload into a table using Vue.js.</p>
  
  <p>I want to take the keys from the first object in the array to create the table headings, the code below works and provides the correct values, but the problem is I keep getting this error message</p>
  
  <p>The Error message</p>
  
  <pre><code>[Vue warn]: Error in render function: "TypeError: objectArray is null"
  
  (found in &lt;Root&gt;)
  </code></pre>
  
  <p>The Html element</p>
  
  <pre><code>&lt;thead&gt;
      &lt;tr&gt;
          &lt;th v-for="(value, key) in objectArray[0]"&gt;
              {{ key }}
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p>The JSON payload</p>
  
  <pre><code>[
  { "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" } 
  ]
  </code></pre>
  
  <p>The Vue code to populate the object</p>
  
  <pre><code>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();
      }
  });
  </code></pre>