searchanddisplace-core/resources/js/components/helpers/Filter.vue

<template>
    <Fieldset :legend="displayName" :toggleable="true" class="filter-container">

            <div v-for="option of optionsList" :key="option.name" class="filter-option">
                <h5>{{ option.name }}</h5>

                <SelectButton
                    :key="option.name"
                    v-model="selectedOption"
                    :options="option.list"
                    optionLabel="name" />
            </div>
    </Fieldset>
</template>

<script lang="ts">

    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { FilterOptions } from '../../interfaces/FilterOptions';

    @Component
    export default class Filter extends Vue {

        @Prop(String)
        public readonly id!: string;

        @Prop(String)
        public readonly displayName!: string;

        @Prop({ default: [] })
        public readonly options!: FilterOptions;

        private optionsList = new Array;

        public selectedOption = null;

        public created()
        {
            for (let index in this.options) {
                let words = index.split('_');
                for (let i = 0; i < words.length; i++) {
                    words[i] = words[i].charAt(0).toUpperCase() + words[i].substr(1);
                }



                let option = {
                    name: words.join(' '),
                    list: new Array
                };
                this.options[index].forEach( opt => {
                    option.list.push({
                        'name': opt,
                        'value': opt
                    });
                });

                this.optionsList.push(option);
            }
        }
    }
</script>

<style lang="scss">
.filter-container,
.filter-option {
    margin-bottom: 10px;
}
</style>