Home > Enterprise >  List rendering in vue js
List rendering in vue js

Time:03-04

How to i render a list with the answers:

<script>

export default {

data() {
return {

questions: {
question: "2 2 is...?",
answers: {a:'4', b:'6', c:'10'},
correct:'a'

}
}

}


}
</script>

i want to have {{ questions['question] }}andv-for` of answers; in most of courses, they make a v-for but in way that they list all 'answers' of all 'questions' but not elements of object in one

CodePudding user response:

Maybe you can do something like this

<div v-for="answerKey in Object.keys(answers)">
  {{ answerKey }}: {{ answers[answerKey] }}
</div>

This will render answers like this:

a: 4 b: 6 c: 10

CodePudding user response:

Inside that v-for, you can do another one to display the properties of your answers object.

  • Related