title: Vue.js v-for loop from an object key and nested array
body: <p>I have quiet a complex v-for loop inside another v-for. Basically displays a list of questions and a list of answers for that question. I plan on getting the key for the question and using that for the key for grouped_answers.</p>
  
  <p>The v-for loop is as follows:</p>
  
  <pre><code>        &lt;div v-for="question in questions.questions"&gt;
            {{question.question}}
            &lt;div v-for="a in grouped_answers[0].answers"&gt;
              {{a.answer}}
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Currently returning an error of:</p>
  
  <blockquote>
    <p>Cannot read property 'answers' of undefined.</p>
  </blockquote>
  
  <p>The grouped_answers object example is here:</p>
  
  <pre><code>[
    {
      "question_id": 1,
      "answers": [
        {
          "id": 1,
          "answer": "Cat"
        },
        {
          "id": 2,
          "answer": "Dog"
        }
      ]
    },
    {
      "question_id": 2,
      "answers": [
        {
          "id": 3,
          "answer": "Fish"
        },
        {
          "id": 4,
          "answer": "Ant"
        }
      ]
    }
  ]
  </code></pre>
  
  <p>For the full template I have attached the code below:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8 col-md-offset-2"&gt;
                &lt;div v-for="app in appliances"&gt;
                  &lt;input type="radio" id="one" v-model="appliance"  v-bind:value="app.id" v-on:change="getQuestions"&gt;
                  &lt;label for="one"&gt;{{app.appliance}}&lt;/label&gt;
                &lt;/div&gt;
                &lt;br&gt;
                &lt;span&gt;Picked: {{appliance}}&lt;/span&gt;
                &lt;/br&gt;
                &lt;/br&gt;
                  &lt;div v-for="co in brands"&gt;
                    &lt;input type="radio" id="two" v-model="brand"  v-bind:value="co.id"&gt;
                    &lt;label for="one"&gt;{{co.brand}}&lt;/label&gt;
                  &lt;/div&gt;
                &lt;span&gt;Picked: {{ brand }}&lt;/span&gt;
                &lt;/br&gt;
                &lt;/br&gt;
                  &lt;input type="radio" id="one" value=1 v-model="age"&gt;
                  &lt;label for="one"&gt;1 Year&lt;/label&gt;
                  &lt;br&gt;
                  &lt;input type="radio" id="two" value=2 v-model="age"&gt;
                  &lt;label for="two"&gt;2 Years&lt;/label&gt;
                  &lt;br&gt;
                  &lt;input type="radio" id="two" value=3 v-model="age"&gt;
                  &lt;label for="two"&gt;3 Years&lt;/label&gt;
                  &lt;br&gt;
                  &lt;input type="radio" id="two" value=4 v-model="age"&gt;
                  &lt;label for="two"&gt;4 Years&lt;/label&gt;
                  &lt;br&gt;
                  &lt;input type="radio" id="two" value=5 v-model="age"&gt;
                  &lt;label for="two"&gt;5 Years&lt;/label&gt;
                  &lt;br&gt;
                  &lt;input type="radio" id="two" value=6 v-model="age"&gt;
                  &lt;label for="two"&gt;6 Years&lt;/label&gt;
                  &lt;br&gt;
                  &lt;input type="radio" id="two" value=7+ v-model="age"&gt;
                  &lt;label for="two"&gt;7+ Years&lt;/label&gt;
                  &lt;br&gt;
                &lt;span&gt;Picked: {{ age }}&lt;/span&gt;
                &lt;br&gt;
                &lt;br&gt;
                  &lt;div v-for="question in questions.questions"&gt;
                    {{question.question}}
                    &lt;div v-for="a in grouped_answers[0].answers"&gt;
                      {{answers.answer}}
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;br&gt;
                &lt;br&gt;
                {{grouped_answers[0]}}
                &lt;br&gt;
                &lt;br&gt;
                  &lt;input v-model="first_name" placeholder="First Name"&gt;
                  &lt;p&gt;First Name is: {{ first_name }}&lt;/p&gt;
                  &lt;input v-model="last_name" placeholder="Last Name"&gt;
                  &lt;p&gt;Last Name is: {{ last_name }}&lt;/p&gt;
                  &lt;input v-model="phone_number" placeholder="Phone Number"&gt;
                  &lt;p&gt;Phone Number is: {{ phone_number }}&lt;/p&gt;
                  &lt;input v-model="email" placeholder="Email"&gt;
                  &lt;p&gt;Email is: {{ email }}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import axios from 'axios';
      export default {
        mounted() {
            console.log('Component ready.');
  
            console.log(JSON.parse(this.a));
            console.log(JSON.parse(this.b));
  
            this.appliances = JSON.parse(this.a);
            this.brands = JSON.parse(this.b);
  
        },
  
        props: ['a','b'],
  
          data: function() {
            return {
                appliances: '',
                appliance: '',
                brands: '',
                brand: '',
                age: '',
                first_name: '',
                last_name: '',
                phone_number: '',
                email: '',
                questions: '',
                answers: '',
                result: '',
                grouped_answers:'',
              }
          },
          methods: {
           getQuestions: function (){
             console.log(this.appliance);
             var self = this;
             axios.get('/get_questions/' + this.appliance, {
  
              })
              .then(function(response) {
                  console.log(response.data);
                  self.questions = response.data;
                  self.getAnswers();
              })
              .catch(function(error) {
                  console.log(error);
              });
           },
           getAnswers: function (){
             console.log(this.appliance);
             var self = this;
             axios.get('/get_answers/' + this.appliance, {
  
                })
                .then(function(response) {
                    console.log(response.data);
                    self.answers = response.data;
                    self.putAnswers();
                })
                .catch(function(error) {
                    console.log(error);
                });
           },
           putAnswers: function (){
             var result = {};
  
             for (var i = 0; i &lt; this.answers.answers.length; i++) {
               var question_id = this.answers.answers[i].question_id;
               console.log(question_id);
               if(!result[question_id]) {
                  result[question_id] = {question_id: question_id, answers: []};
                }
                result[question_id].answers.push({
                  id: this.answers.answers[i].id,
                  answer: this.answers.answers[i].answer})
             }
             result = Object.keys(result).map(function (key) { return result[key]; });
             console.log(result);
  
             this.grouped_answers = result;
  
             console.log(this.grouped_answers[0].answers);
  
           },
         },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>UPDATE AFTER RECOMMENDATION</strong></p>
  
  <pre><code>        &lt;div v-for="question in questions.questions"&gt;
            {{question.question}}
            &lt;div v-for="a in grouped_answers[0].answers" v-if="grouped_answers"&gt;
              {{a.answer}}
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>