如何从多维数组问题中获取选定的单选按钮值。
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h3>Vue JS - multi array radio button for Questions and Answers</h3>
{{selectedAnswers}}
<div v-for="question in questions" :key="question.id">
<p>{{ question.question }}</p>
<div v-for="option in question.options" :key="option.id">
<label>
<input type="radio" :name="'question_' + question.id" :value="option.text"
v-model="selectedAnswers[question.id]" />
{{ option.text }}
</label>
</div>
</div>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
selectedAnswers: {},
questions: [
{
id: 6,
question: 'What is the largest planet in our solar system?',
options: [
{ id: 21, text: 'Mars' },
{ id: 22, text: 'Venus' },
{ id: 23, text: 'Jupiter' },
{ id: 24, text: 'Saturn' }
]
},
{
id: 7,
question: 'Which gas do plants absorb from the atmosphere during photosynthesis?',
options: [
{ id: 25, text: 'Carbon dioxide' },
{ id: 26, text: 'Oxygen' },
{ id: 27, text: 'Nitrogen' },
{ id: 28, text: 'Hydrogen' }
]
},
{
id: 8,
question: 'What is the chemical symbol for gold?',
options: [
{ id: 29, text: 'Au' },
{ id: 30, text: 'Ag' },
{ id: 31, text: 'Fe' },
{ id: 32, text: 'Cu' }
]
},
{
id: 9,
question: 'In which year did Christopher Columbus first voyage to the Americas?',
options: [
{ id: 33, text: '1492' },
{ id: 34, text: '1607' },
{ id: 35, text: '1776' },
{ id: 36, text: '1812' }
]
},
{
id: 10,
question: 'What is the largest organ in the human body?',
options: [
{ id: 37, text: 'Brain' },
{ id: 38, text: 'Heart' },
{ id: 39, text: 'Skin' },
{ id: 40, text: 'Lungs' }
]
}
]
};
},
});
app.mount("#app");
</script>
</body>
</html>