How can I get value radio button when submit form on the vue component?

Question

I have two component

My first component like this :

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

On the first component, it will call form input component

The form input component like this :

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

I using pattern like that. So the form input component can be used in many components

But my problem here is : I can not retrieve the value when submitting button

I try like that, but the result of console.log(this.gender) is null

I want when input data name and submit form, it will get the gender

How can I solve this problem?

Answer 1

For radio boxes and selects, use @change instead of @input:

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