Reputation: 39
I'm trying to make several boxes of FAQs based on a list with objects with questions and answers. But I get "Cannot read property 'question' of undefined", why? My code looks like this:
export default {
data() {
return {
totalFAQs: [{
id: '1',
question: 'This is a question',
answer: 'This is an answer to your question'
},
{
id: '2',
question: 'This is a question',
answer: 'This is an answer to your question'
}
]
}
}
}
<div :v-for="faq in totalFAQs" :key="item.id" class="section-container">
<div class="faq-question">
<h4>{{faq.question}}</h4>
</div>
<div class="expanded-content expanded-faq">
<div class="faq-answer">
<p>{{faq.answer}}</p>
</div>
</div>
</div>
Upvotes: 1
Views: 1738
Reputation: 496
you need to change your ":v-for" to this "v-for" it is the right syntax. In your key part you have wrong variable
<div v-for="faq in totalFAQs" :key="faq.id"class="section-container">
<div class="faq-question">
<h4>{{faq.question}}</h4>
</div>
<div class="expanded-content expanded-faq">
<div class="faq-answer">
<p>{{faq.answer}}</p>
</div>
</div>
</div>
Upvotes: 2
Reputation: 577
I think this problem is related to your key
value being set to item.id
rather than faq.id
. Also v-for
should be written without :
at the beginning.
Upvotes: 2