andriajah Sun Mar 2021 2 years ago

Tutorial Vue Js - Get Selected Radio Button


Pengembang yang terhormat,
 
Dalam contoh tutorial ini saya akan menunjukkan kepada Anda bagaimana mendapatkan nilai tombol radio yang dipilih menggunakan acara onchange di vue js. Saya akan memberi Anda contoh sederhana untuk memeriksa nilai tombol radio di vue js.
 
Kita bisa dengan mudah mendapatkan nilai teks yang dipilih dari tombol radio di vue js. Dalam tutorial tombol radio vue js ini saya akan memberi Anda contoh lengkap mendapatkan teks tombol radio yang dipilih dan nilai di vuejs.
 
Dalam contoh ini saya hanya akan membuat tombol radio opsi pria dan wanita sederhana. Saat pengguna memilihnya. kita akan mendapatkan teks tombol radio yang dipilih dan nilai menggunakan pada nilai acara perubahan vue js.

Kode contoh:
<!DOCTYPE html>
<html>
<head>
    <title> How to get radio button value in vue js - Medikre.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>
Semoga dapat membantu Anda.
vue js tutorial vue js selected radio button