Vue.js v-pour la boucle à partir d'un objet clé et un tableau imbriqué

Je calme un complexe v-pour la boucle à l'intérieur d'un autre v-pour. Fondamentalement, affiche une liste de questions et une liste de réponses pour cette question. J'ai un plan sur l'obtention de la clé de la question et en utilisant que pour les clés pour grouped_answers.

Le v-pour la boucle est comme suit:

        <div v-for="question in questions.questions">
          {{question.question}}
          <div v-for="a in grouped_answers[0].answers">
            {{a.answer}}
          </div>
        </div>

Actuellement en renvoyant une erreur de:

Impossible de lire la propriété "réponses" undefined.

La grouped_answers objet exemple est ici:

[
  {
    "question_id": 1,
    "answers": [
      {
        "id": 1,
        "answer": "Cat"
      },
      {
        "id": 2,
        "answer": "Dog"
      }
    ]
  },
  {
    "question_id": 2,
    "answers": [
      {
        "id": 3,
        "answer": "Fish"
      },
      {
        "id": 4,
        "answer": "Ant"
      }
    ]
  }
]

Pour le modèle complet, j'ai joint le code ci-dessous:

<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div v-for="app in appliances">
<input type="radio" id="one" v-model="appliance"  v-bind:value="app.id" v-on:change="getQuestions">
<label for="one">{{app.appliance}}</label>
</div>
<br>
<span>Picked: {{appliance}}</span>
</br>
</br>
<div v-for="co in brands">
<input type="radio" id="two" v-model="brand"  v-bind:value="co.id">
<label for="one">{{co.brand}}</label>
</div>
<span>Picked: {{ brand }}</span>
</br>
</br>
<input type="radio" id="one" value=1 v-model="age">
<label for="one">1 Year</label>
<br>
<input type="radio" id="two" value=2 v-model="age">
<label for="two">2 Years</label>
<br>
<input type="radio" id="two" value=3 v-model="age">
<label for="two">3 Years</label>
<br>
<input type="radio" id="two" value=4 v-model="age">
<label for="two">4 Years</label>
<br>
<input type="radio" id="two" value=5 v-model="age">
<label for="two">5 Years</label>
<br>
<input type="radio" id="two" value=6 v-model="age">
<label for="two">6 Years</label>
<br>
<input type="radio" id="two" value=7+ v-model="age">
<label for="two">7+ Years</label>
<br>
<span>Picked: {{ age }}</span>
<br>
<br>
<div v-for="question in questions.questions">
{{question.question}}
<div v-for="a in grouped_answers[0].answers">
{{answers.answer}}
</div>
</div>
<br>
<br>
{{grouped_answers[0]}}
<br>
<br>
<input v-model="first_name" placeholder="First Name">
<p>First Name is: {{ first_name }}</p>
<input v-model="last_name" placeholder="Last Name">
<p>Last Name is: {{ last_name }}</p>
<input v-model="phone_number" placeholder="Phone Number">
<p>Phone Number is: {{ phone_number }}</p>
<input v-model="email" placeholder="Email">
<p>Email is: {{ email }}</p>
</div>
</div>
</div>
</template>
<script>
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 < 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);
},
},
}
</script>

MISE À JOUR D'APRÈS LES RECOMMANDATIONS

        <div v-for="question in questions.questions">
{{question.question}}
<div v-for="a in grouped_answers[0].answers" v-if="grouped_answers">
{{a.answer}}
</div>
</div>