Get Radio Button Value on Onchange Event in Vue.js 2

Published on Feb 25, 2022

He can easily get the selected text value of radio buttons in Vue.js 2. Here is the example:

<<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    
<div id="app">
  <label><input type="radio" name="topic_id" @change="onChange($event)" class="form-control" value="1"> Laravel</label>
  <label><input type="radio" name="topic_id" @change="onChange($event)" class="form-control" value="2"> Vue.js</label>
  <label><input type="radio" name="topic_id" @change="onChange($event)" class="form-control" value="3"> React.js</label>
</div>
    
<script type="text/javascript">
    var app = new Vue({
      el: '#app',
      methods: {
				onChange(event) {
					var optionText = event.target.value;
					console.log(optionText);
				}
      }
    })
</script>