Vue.js is a powerful JavaScript framework that simplifies the development of interactive user interfaces. In this tutorial, we’ll explore how to efficiently handle multiple radio buttons using Vue.js and the v-for directive with the map function
Radio buttons are commonly used in surveys and quizzes where users are required to select a single option from a list. Vue.js makes it easy to manage the state of multiple radio buttons using the v-model directive. In this tutorial, we’ll demonstrate how to handle multiple radio buttons dynamically using the map function
How to Use the Map Function to Handle Multiple Radio Buttons?
Firstly, let’s set up a basic Vue.js application. We have a list of questions, each with multiple options, and we want to capture the selected answers.
To enhance the readability and maintainability of the code, we can use the JavaScript map function to iterate over the questions and their options. This makes the code more concise and easier to understand.
Vue Js Handle Multiple Radio Button in Map Function
<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>
Dynamically Handling Multiple Radio Buttons with the Map Function
Now, let’s delve into the JavaScript part of our Vue.js application. We initialize the Vue app and define the data structure, including an empty selectedAnswers object and an array of questions, each containing an id, question text, and options.
<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>
Output of Vue Js Get Multiple Radio Button Value
Conclusion
Vue.js, in combination with the map function, offers an efficient way to handle multiple radio buttons dynamically. By structuring our data and leveraging Vue.js directives, we can create interactive user interfaces with ease. This tutorial provides a foundation for managing state in situations where users need to select a single option from a list, such as surveys or quizzes, showcasing the versatility and power of Vue.js in frontend development.
