exchange-2.0/resources/assets/vue/components/settings/elements/SegmentServiceListComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row" v-for="service in segmentServices" v-bind:key="service.id" :data="service">
                <div class="col">
                    <segment-service-component :segment_id="item.id" :data="service" section="segmentsSection"></segment-service-component>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                parameters: this.data
            }
        },
        computed: {
            SystemServices() {
                let vm = this;
                return this.$store.getters.getListData('serviceTypeSection').forEach(function(value){
                    vm.addInactiveServices(value)
                });
            },
            segmentServices: function(){
                return this.parameters.services;
            }
        },
        watch: {
            SystemServices(){
                this.SystemServices();
            }
        },
        methods: {
            inArray(element){
                return this.parameters.services.some(service => service.id === element.id);
            },
            pushIfNotExist(element){
                if (!this.inArray(element)) {
                    return this.parameters.services.push(element);
                }
            },
            addInactiveServices(element){
                this.pushIfNotExist({
                    configurations: {
                        active: false,
                        currencies: []
                    },
                    id: element.id,
                    name: element.name,
                });
            }
        },
        mixins: [componentHandler]
    }
</script>