CODEWITHSUNDEEP
vue.js
user2410266
user2410266

Reputation: 551

Vue.js Select radio option from list

I have an api that has Male and Female gender options.I would like to select only one gender option at a time.The default gender should be male.Currently i am trying the code below but its not working.

<div>
<label class="radio" v-for="(gender,index) in genders" :key="index">
<input type="radio"
@click="selectedGender('gender', gender.code)">
{{gender.description}}
</label>
</div>


data: {       
gender: 'M',     
genders:
[
{
code: "F",
description: "Female",
},
{
code: "M",
description: "Male",
 },
],

methods: {    
selectedGender(type,option){
if (type=== 'gender') {
this.gender = option;
}

Upvotes: 1

Views: 859

Answers (3)

dhruw lalan
dhruw lalan

Reputation: 801

Instead of using loops & click event handlers, you can simply use v-model to bind your radio options value attribute to your vue data's gender variable:

<div>
    <label for="male">
        <input type="radio" id="male" value="M" v-model="gender">Male
    </label>
    <label for="female">
        <input type="radio" id="female" value="F" v-model="gender">Female
    </label>
</div>

data: {
    gender: "M",
}

Upvotes: 2

Mayur Kukadiya
Mayur Kukadiya

Reputation: 2747

Here is your fix :

<div>
  <label class="radio" v-for="singleGender in genders">
    <input type="radio" v-model="gender" v-bind:value="singleGender.code">
    {{singleGender.description}}
  </label>
</div>
<div>{{gender}}</div>

And here is your data :

data: {
 gender: "M",
 genders: [
   {
     code: "F",
     description: "Female"
   }, 
   {
     code: "M",
     description: "Male"
   }
 ]
}

There is no need to use click event for store it's value to Model. Note : maybe in template selector, html can't render in DOM until you render it manually.

Upvotes: 1

Nilesh Patel
Nilesh Patel

Reputation: 3317

Here is the solution:

<template>
  <div>
    <label class="radio" v-for="(gender, index) in genders" :key="index">
      <input type="radio" :value="gender.code" v-model="selGender" @click="selectedGender(gender.code)" />
      {{ gender.description }}
    </label>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      selGender: "M",
      genders: [
        {
          code: "F",
          description: "Female",
        },
        {
          code: "M",
          description: "Male",
        },
      ],
    };
  },
  methods: {
    selectedGender(option) {
      this.selGender = option;
    },
  },
};
</script>

Upvotes: 1

Related Questions