Vue form component with custom radio button component

by Hristiyan Dodov

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<body><div id="my-app"></div></body>

JavaScript

Vue.component('radio-button', {
    props: ['id', 'value'],
    template: `
    <label class="radio">
        <input type="radio" :value="id" v-model="radioButtonValue">
        <span>{{ id }}</span>
    </label>
    `,
    computed: {
        radioButtonValue: {
            get: function() {
                return this.value;
            },
            set: function() {
                this.$emit("input", this.id);
            }
        }
    }
});

Vue.component('example-form', {
    template: `
        <div>
            <radio-button id="1" v-model="selectedValue"/>
            <radio-button id="2" v-model="selectedValue"/>
            <radio-button id="3" v-model="selectedValue"/>
            <div class="result">
                Radio button selection: {{selectedValue}}
            </div>
        </div>
    `,
    data: function() {
        return {
            selectedValue: null
        };
    }
});

new Vue({
    el: '#my-app',
    template: `<example-form></example-form>`
});