ParentTeamDropdown.vue

<template>
    <base-dropdown 
        :name="name" 
        :dropdown-ref="name" 
        :active="active" 
        dropdown-class="left-0 top-1 h5 overflow-y-scroll">
        <span slot="label" class="fw6 sans-serif">{{ label }} <i class="ml2 zmdi zmdi-caret-down"></i></span>
        <div slot="options">
            <ul class="list ma0 pl0">
                <li @click="setParentTeam('')" class="pointer hover-bg-black-05 bb b--black-10 pa3 w5">All MLB</li>
                <li 
                    v-for="team in parentTeams" 
                    @click="setParentTeam(team.code)"
                    class="pointer hover-bg-black-05 bb b--black-10 pa3 w5">
                    {{ team.label }}
                </li>
            </ul>
        </div>
    </base-dropdown>
</template>

<script>
    import BaseDropdown from './BaseDropdown';
    import filters from '../../models/filters';

    export default {
        components: {
            BaseDropdown,
        },

        props: [
            'name',
        ],

        data() {
            return {
                parentTeams: filters.parentTeams,
            };
        },

        computed: {
            selection() {
                return this.$store.state.filters.parentTeam;
            },

            active() {
                return this.selection !== '';
            },

            label() {
                if (!this.active) {
                    return 'All MLB';
                }

                return this.selection;
            },
        },

        methods: {
            setParentTeam(parentTeamCode) {
                this.$store.commit('setFilters', { parentTeam: parentTeamCode });
                this.$eventBus.$emit('close_dropdown', 'parentTeam');
            },
        },
    };
</script>