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

<template>
    <div class="row parentContainer">
        <div class="col-3 m-r-5 m-b-10 b-a b-grey p-t-20 p-b-20"  v-for="item in $store.getters.getListData('convertibleCurrenciesSection')" v-bind:key="item.id" >
            <currency-component :section="section" :data="item"></currency-component>
        </div>
        <div class="col-3 b-a b-grey b-dashed pointer requestModal m-b-10" data-type="addCurrency" style="min-height: 127px;">
            <div class="row h-100 align-items-center text-center">
                <div class="col">
                    <div class="m-b-10 hint-text">
                        <i class="fa fa-plus fs-30 muted hint-text"></i>
                    </div>
                    <div class="font-heading fs-14 scalled scalled all-caps muted">Add Currency</div>
                </div>
            </div>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="addCurrency">
                <add-currency-form-component :section="section"></add-currency-form-component>
            </modal-component>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
          return {
              section: 'convertibleCurrenciesSection'
          }
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': {}});
        },
        computed: {
            pendingList () {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        watch: {
            pendingList(inComplete){
                if(inComplete){
                    this.fetchList();
                }
            }
        },
        methods: {
            fetchList(){
                this.submit(this.route('api.currency.list') + '?filters=' + JSON.stringify({'id_not': 1}), 'get', this.section, false, false)
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
            }
        }

    }
</script>