title: Vuejs Invalid v-for expression as array element does not exist?
body: <p>So there is an <code>Error compiling template</code> error.</p>
  
  <p>It seems though Vue is trying to access an array element that does not exist. That is <code>recommendationResponse[recommendedItems]</code> in the below code.</p>
  
  <p>The exact error is <code>Invalid v-for expression:</code>recommendationResponse[recommendedItems] as item`</p>
  
  <p>I thought that portion would not be rendered as the <code>v-if</code> would fail on initialisation. Nonetheless I don't think I am doing good enough checking if that array element exists.</p>
  
  <p>The code is:</p>
  
  <pre><code>&lt;div v-if="recommendationResponse" class="row"&gt;
          &lt;h2&gt;Response&lt;/h2&gt;
          &lt;div class="well"&gt;
              {{ recommendationResponse }}
          &lt;/div&gt;
          &lt;div v-for="recommendationResponse[recommendedItems] as item" class="col-md-4"&gt;
              &lt;h4&gt;{{ item['items'][0]['id'] }}&lt;/h4&gt;
              &lt;p&gt;{{ item['items'][0]['name'] }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Vue Instance</strong>:</p>
  
  <pre><code>new Vue({
      el: '#app',
      data: {
          recommendationResponse: ''
      },
      methods: {
          getRecommendations: function(event) {
              this.recommendationResponse = json data I get from somewhere                
          }
      },
  </code></pre>