One possible approach is as follows:
<template>
<v-layout column>
<v-radio-group v-model="questions[questionIndex][currentQuestionId].selected">
<v-row justify="center">
<v-col v-for="(option,i) in questions[questionIndex][currentQuestionId].options" :key="i">
<v-radio :label="option.text" :name="currentQuestionId" :value="option._id"></v-radio>
</v-col>
</v-row>
</v-radio-group>
<v-btn @click="handleClickButtonNext">next question</v-btn>
<v-btn @click="handleClickButtonPrev">previous question</v-btn>
</v-layout>
</template>
<script>
export default {
data() {
return {
questions: [
{
question0: {
selected: null,
options: [
{
text: "text 1",
_id: 1
},
{
text: "text 2",
_id: 2
},
{
text: "text 3",
_id: 3
}
]
}
},
{
question1: {
selected: null,
options: [
{
text: "text 2",
_id: 2
},
{
text: "text 3",
_id: 3
},
{
text: "text 4",
_id: 4
}
]
}
},
],
questionIndex: 0
};
},
computed: {
currentQuestionId() {
return "question" + this.questionIndex;
}
},
methods: {
handleClickButtonNext() {
if (this.questionIndex < this.questions.length-1) this.questionIndex++;
},
handleClickButtonPrev() {
if (this.questionIndex > 0) this.questionIndex--;
},
}
};
</script>
Additional context:
questionIndex - keeps track of the current question index
currentQuestionId - provides the current question id
handleClickButtonNext / handleClickButtonPrev
- enables navigation between questions
This method displays only one question at a time.
If you prefer to loop through all questions without tracking an index, another option is to modify the code:
<template>
<v-layout column>
<v-radio-group
v-for="(question, j) in questions"
:key="j"
v-model="question[`question${j}`].selected"
>
<v-row justify="center">
<v-col v-for="(option,i) in question[`question${j}`].options" :key="i">
<v-radio :label="option.text" :name="`question${j}`" :value="option._id"></v-radio>
</v-col>
</v-row>
</v-radio-group>
</v-layout>
</template>
<script>
export default {
data() {
return {
questions: [
{
question0: {
selected: null,
options: [
{
text: "text 1",
_id: 1
},
{
text: "text 2",
_id: 2
},
{
text: "text 3",
_id: 3
}
]
}
},
{
question1: {
selected: null,
options: [
{
text: "text 2",
_id: 2
},
{
text: "text 3",
_id: 3
},
{
text: "text 4",
_id: 4
}
]
}
}
]
};
}
};
</script>