Vue.js выберите опцию радио из списка


Vue.js выберите опцию радио из списка

02.12.2020 07:32:54 Просмотров 13 Источник

У меня есть 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;
}
У вопроса есть решение - Посмотреть?

Ответы - Vue.js выберите опцию радио из списка / Vue.js Select radio option from list

Nilesh Patel

02.12.2020 07:55:05

Вот решение:

<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>
Является ответом!
mayur kukadiya

02.12.2020 08:05:18

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

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

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

dhruw lalan

02.12.2020 08:19:03

Вместо использования обработчиков событий loops & click вы можете просто использовать v-model для привязки атрибута radio options value к переменной gender ваших данных vue:

<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",
}
Помочь в развитии проекта:
Закрыть X