Vuejs: v-for, cannot read property of undefined

Question

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>

holmicz · Accepted Answer · 2020-07-16 09:37:31Z

2

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.

answered Jul 16, 2020 at 9:37

holmicz

5774 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omar Sy · Accepted Answer · 2020-07-16 12:21:16Z

2

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>

edited Jul 16, 2020 at 12:21

answered Jul 16, 2020 at 9:37

Omar Sy

5062 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vuejs: v-for, cannot read property of undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related