<template>
    <Checkbox-group :value="handleValue" @input="updateValue">
        <Checkbox v-for="name in idNameList" :label="name.id" :key="name.id">
            <span>{{name.text}}</span>
        </Checkbox>
    </Checkbox-group>
</template>

<script>
export default {
    name: 'checkbox-material',
    props: {
        value: {
            type: Array,
            default: function() {
                return [];
            }
        },
        idNameList: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data() {
        let _this = this;

        return {
            handleValue: _this.value.map(s => `${s.id}`)
        };
    },
    methods: {
        updateValue: function(value) {
            let newValue = value.map(s => ({id: s}));

            this.handleValue = value;
            this.$emit('input', newValue);
        }
    },
    watch: {
        value(newValue) {
            this.handleValue = newValue.map(s => `${s.id}`);
        }
    }

};
</script>

<style>

</style>