Vue.js v-for loop from an object key and nested array
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.
The v-for loop is as follows:
<div v-for="question in questions.questions">
{{question.question}}
<div v-for="a in grouped_answers[0].answers">
{{a.answer}}
</div>
</div>
Currently returning an error of:
Cannot read property 'answers' of undefined.
The grouped_answers object example is here:
[
{
"question_id": 1,
"answers": [
{
"id": 1,
"answer": "Cat"
},
{
"id": 2,
"answer": "Dog"
}
]
},
{
"question_id": 2,
"answers": [
{
"id": 3,
"answer": "Fish"
},
{
"id": 4,
"answer": "Ant"
}
]
}
]
For the full template I have attached the code below:
<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>
UPDATE AFTER RECOMMENDATION
<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>
Answer
v-for takes priority over v-if so it is trying to run the loop before there is any data. To prevent this add a surrounding div or span and attach the v-if to that. Something like:
<div v-for="question in questions.questions">
{{question.question}}
<div v-if="grouped_answers">
<div v-for="a in grouped_answers[0].answers">
{{a.answer}}
</div>
</div>
</div>
And here is the documentation where they mention priority: