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.
Be First to Comment