<template>
    <Checkbox-group :value="handleValue" @input="updateValue" style="width: 350px;" >
        <Checkbox label="1">
            <span>成人</span>
        </Checkbox>
        <Checkbox label="2" >
            <span>大童</span>
        </Checkbox>
        <Checkbox label="4">
            <span>中童</span>
        </Checkbox>
        <Checkbox label="3">
            <span>小童</span>
        </Checkbox>
        <Checkbox label="5">
            <span>幼童 </span>
        </Checkbox>
    </Checkbox-group>
</template>

<script>
export default {
    name: 'CheckboxAge',
    props: ['value'],
    data() {
        let _this = this;

        return {
            handleValue: _this.value.split('|')
        };
    },
    methods: {
        updateValue(newValue) {
            let nValue = newValue.join('|');

            this.$emit('input', nValue);
        }
    },
    watch: {
        value(newValue) {
            this.handleValue = newValue.split('|');
        }
    }
};

</script>

<style>

</style>