Vue JS Radio Button OnChange Event

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.