Vue js radio button on change event; Through this tutorial, i am going to show you how to get checked the radio button value in vue js app with v-model.
Vue JS Get Checked Radio Button Value on Onchange Event
- 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
Run the following command on terminal to create new vue js app:
vue create my-app
Step 2 – Create Component
Go to /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 - Laratutorials.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
Go to /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; Through this tutorial, you have learned how to get checked radio button value in vue js app.
Recommended VUE JS Tutorials
Recommended:-Vue Js If Else Condition Example
Recommended:-Vue Js For Loop (v-for) Example
Recommended:-Vue JS Ajax Form Submit Tutorial
Recommended:-Vue Js Add Class To Element On Click Tutorial
Recommended:-Vue JS Checkbox Checked Event Tutorial
Recommended:-Vue Js Get Current Date and Time
Recommended:-How to Add and Use Bootstrap Modal in Vue Js App
Recommended:-Vue JS Download File using Axios App
Recommended:-Vue Js keydown Event Example
Recommended:-How to Show Flash Message Using Vue JS in Laravel 8
Recommended:-How to Create Laravel 8 Vue JS Like Dislike System
Recommended:-Laravel 8 Vue JS Image/File Upload Tutorial Example