<template>
    <div class="m-l-10 m-t-25">
        <loading-component style="height: 50px; top: 0;" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
        <div v-for="item in $store.getters.getSelectableList(section)" :key="item.id">
            <input type="checkbox" :value="item.id" v-model="selectedItems">
            {{ item.text }}
        </div>
    </div>
</template>
<script>

    export default {
        props: {
            value: {
                required: false
            },
            section: {
                type: String,
                required: true
            },
        },
        computed: {
            selectedItems: {
                get() {
                    return this.value; // Use the prop value as the getter
                },
                set(val) {
                    this.$emit('input', val); // Emit the input event to update the prop value in the parent
                },
            },
        }
    }
</script>

