custom vue-input :: btn-group

BtnGroup.vue

<template>
    <div class="btn-group " role="group">
        <button type="button" :class="getClassForOption(option)"
                v-for="option in options"
                @click="setValue(option)">{{option.title}}</button>
    </div>
</template>


<script>
    export default {
        mounted() {

        },
        props: {
            // варианты выбора, [{title: 'Example title', value: 'Example value',}, ... ]
            options: {
                type: Array,
                required: true,
                default() {
                    return []
                },
            },
            // возвращаемое значение
            value: {
                // type: Number,
                required: false,
                default() {
                    return false
                },
            },
            active_class: {
                type: String,
                required: false,
                default() {
                    return 'btn-primary'
                },
            },
            not_active_class: {
                type: String,
                required: false,
                default() {
                    return 'btn-default'
                },
            },
        },
        data() {
            return {
                // текущее значение - по умолчанию передано из родителя
                current_value: this.value,
            }
        },
        methods: {
            setValue(option) {
                this.current_value = option.value
                this.$emit('input', this.current_value)
            },
            getClassForOption(option) {
                return [
                    'btn',
                    (option.value === this.current_value ? 'btn-primary' : 'btn-default'),
                ]
            },
        },
    }

</script>