Блог

У меня есть API, в котором есть варианты мужского и женского пола.Я хотел бы выбрать только один вариант пола за раз.Пол по умолчанию должен быть мужским.В настоящее время я пытаюсь использовать приведенный ниже код, но он не работает.

 <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;
}
 

Вместо того, чтобы использовать обработчики событий циклов и щелчков, вы можете просто использовать v-model для привязки value атрибута параметров радио к переменной ваших данных vue gender :

 <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",
}
 

Вот ваше исправление :

 <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>
 

И вот ваши данные :

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

Нет необходимости использовать событие щелчка для сохранения его значения для модели.
Примечание: возможно, в селекторе шаблонов html не может отображаться в DOM, пока вы не отобразите его вручную.

Вот решение:

 <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>