Ned
Ned

Reputation: 39

Vuejs: v-for, cannot read property of undefined

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

Answers (2)

Omar Sy
Omar Sy

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

holmicz
holmicz

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

Related Questions