vue js radio button on change event example. In this tutorial, you will learn how to get checked the radio button value in vue js app with v-model.
This tutorial will guide you step by step on how to get selected radio button value using onchange event in vue js.. As well as, will make a simple example of how to get checked radio button value in vue js app.
Note that, this tutorial will take very easy and simple, will take 2 radio buttons first one is male and second one is female option radio buttons. When a user selects it. Get selected radio button text and value using on change event value vue js.
How to Get Selected Radio Button Value in Vuejs
Just follow the following steps and learn how to get checked radio button value in vue js app with v-model:
- Step 1 – Create New VUE JS App
- Step 2 – Create Component
- Step 3 – Add Component on App.vue
Step 1 – Create New VUE JS App
In this step, open your terminal and execute the following command to create new vue js app:
vue create my-app
Step 2 – Create Component
In this step, visit /src/components directory and create a new component called radio-event.vue and add the following code into it:
<!DOCTYPE html>
<html>
<head>
<title> How to get radio button value in vue js - Tutsmake.com </title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="radio" name="test_id" @change="onChange($event)" value="male"> Male
<input type="radio" name="test_id" @change="onChange($event)" value="female"> Female
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods: {
onChange(event) {
var data = event.target.value;
console.log(data);
}
}
})
</script>
</body>
</html>
Step 3 – Add Component on App.vue
In this step, visit /src/ directory and App.vue file. And then add the following code into it:
<template>
<RadioEvent></RadioEvent>
</template>
<script>
import RadioEvent from './components/RadioEvent';
export default {
components: {
RadioEvent
}
}
</script>
Conclusion
vue js radio button on change event example. In this tutorial, you have learned how to get checked radio button value in vue js app.
