screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Js Handle Multiple Radio Button in Map Function</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> <style> /* Your styles remain unchanged */ </style> </body> </html>