Having trouble looping through an array of objects in Vue3
<template>
<div
class="shadow-xl w-96 h-96 md:h-[600px] md:w-[600px] lg:my-12 lg:w-[700px] lg:h-[700px] rounded-md"
>
<button @click="getData">Get data</button>
<ul v-for="question in questions" :key="question.answer">
<li>{{ question.answer }}</li>
</ul>
</div>
</template>
The data structure is as follows:
questions: [
{ "answer": "Paris", "correct": true },
{ "answer": "Tokio", "correct": false },
{ "correct": false, "answer": "Dubai" },
{ "answer": "London", "correct": false }
]
I have correctly fetched the data from the database. However, when I use:
<ul v-for="question in questions" :key="question.answers">
<li>{{ question.answers }}</li>
I get an array of object that looks like this:
[ { "answer": "Paris", "correct": true }, { "answer": "Tokio", "correct": false }, { "answer": "Dubai", "correct": false }, { "answer": "London", "correct": false } ]
But if I want to display only the city names and change the code to:
<ul v-for="question in questions" :key="question.answers">
<li>{{ question.answer }}</li>
or even
<ul v-for="question in questions" :key="question.answers">
<li>{{ question.answers.answer }}</li>
It doesn't work. Where am I making a mistake? I have two questions stored as documents in Firestore. Perhaps I need to use v-for twice...
<ul v-for="question in questions" :key="question.answers">
<li>{{ question.answer }}</li>
or even
<ul v-for="question in questions" :key="question.answers">
<li>{{ question.answers.answer }}</li>