vue 구성 요소에서 양식을 제출할 때 값 라디오 버튼을 얻는 방법

vue 구성 요소에서 양식을 제출할 때 값 라디오 버튼을 얻는 방법

나는 두 가지 요소를 가지고 있다.

이와 같은 첫 번째 구성 요소:

<template>
    <div>
        ...
            <form-radio id="gender" name="gender" :data="genderData" v-model="gender">Gender</form-radio>
        ...
        <button type="submit" class="btn btn-primary" @click="submit">Submit</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                gender: null,
                genderData: [
                    {id: 1, label: 'Men', value:1},
                    {id: 2, label: 'Women', value:2}
                ],
            }
        },
        methods: {
            submit() {
                console.log('submit profile')
                console.log(this.gender)
            }
        }
    }
</script>

첫 번째 구성 요소에서는 폼 입력 구성 요소를 호출한다.

다음과 같은 양식 입력 구성 요소:

<template>
    <div class="form-group">
        <label class="col-sm-3 control-label"><slot></slot></label>
        <div class="col-sm-9">
            <label v-for="item in data" class="radio-inline">
                <input type="radio" :name="name" :id="item.id" :value="item.value" :required="isRequired ? true : false" @input="$emit('input', $event.target.value)">
                {{item.label}}
            </label>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            name: String,
            data: Array,
            isRequired:{
                type: Boolean,
                default: true
            },
            pattern: String,
            value: {
                type: [String, Number]
            }
        }
    }
</script>

나는 그렇게 패턴을 사용한다.그래서 양식 입력 구성요소는 많은 구성요소에서 사용될 수 있다.

그러나 여기서 나의 문제는: 버튼을 제출할 때 값을 검색할 수 없다는 것이다.

그렇게 노력하지만 그 결과console.log(this.gender)이다null

데이터 이름과 제출 양식을 입력하면 성별이 달라진다.

어떻게 하면 이 문제를 해결할 수 있을까?

라디오 박스 및 선택 시@change대신에@input:

<input type="radio" ... @change="$emit('input', $event.target.value)">

라디오에서 값을 추가해야 한다.다음 절차를 따르십시오.

<input type="radio" id="gender" value="male" v-model="gender">

그리고 대본은

export default {
 data() {
  return{
    gender: 'male'
  }
 }
}

옵션으로 선택하려면:

<select v-model="selected">
  <option disabled value="">Select sex</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
 </select>

그리고 대본은

   export default {
    data() {
     return { 
      selected: ''
     }
    }
   }

참조URL: https://stackoverflow.com/questions/49248878/how-can-i-get-value-radio-button-when-submit-form-on-the-vue-component