Vuejs form input binding with radio checkbox

Vuejs radion button sometimes make it complex for beginners or starter fresh developer, So in this post you will learn how to use radio button in vuejs project and how to bind the radio button value in data.

In this example, I have taken the example select gender male, female, and other.

For the radio button looks good I have an import bootstrap 5 libraries also called npm od bootstrap 5 for design looks better.

First in this example which is I have defined a variable in the data method which is gender and also taken a single value male because in the radion button we always need to take at least a single value for checked.

After that for bind tha radion button value i used v-model="gender" in the radio button, So once i select the radio busson that radion button value will bind in to gender variable through the v-model.

Another thing in this example is checked, In this example, I have bound the checked attribute and given a condition if true the and then the radio button checked else not, this bind checked I used because it can necessary at the updated time we must need to select the value.

Example : Radio Button Use In Vuejs

Radio.vue This is my radio component example of how to use the radio button in the vuejs project and how to bind the value in the radio button.

<template>
  <div class="container mt-5 border">
      <label for="">Select Gender :</label>
      <div class="d-flex">
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="gender" id="male" value="Male" v-model="gender" :checked="gender == 'Mail'">
              <label class="form-check-label" for="male">Male</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="gender" id="female" value="Female" v-model="gender" :checked="gender == 'Female'">
              <label class="form-check-label text-nowrap" for="female">Female</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="gender" id="other" value="Other" v-model="gender" :checked="gender == 'Other'">
              <label class="form-check-label text-nowrap" for="other">Other</label>
          </div>
      </div>
      <br>
      <p>Gender : {{ gender }}</p>
  </div>
</template>
  
<script>

export default {
  name:'Radio',

  data(){
    return {
      gender:'Male'
    }
  }
}

</script>

<style scoped>
/* Your Custom Style */
</style>

By referring above example you can easy to understand how to use the radio button in value js, it is easy to use once you see the above example.

Vuejs from input binding with select box option

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)