# wpfunnels/3.12.13/admin/modules/template-library/Components/StepCategorySelect.vue

WPFunnels – Funnel Builder for WooCommerce with Checkout & One Click Upsell, version 3.12.13. 50 lines.

- Page: https://pluginprobe.com/plugins/wpfunnels/3.12.13/code/admin/modules/template-library/Components/StepCategorySelect.vue
- Raw: https://pluginprobe.com/plugins/wpfunnels/3.12.13/raw/admin/modules/template-library/Components/StepCategorySelect.vue
- Modified: 2021-06-15T12:35:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/wpfunnels/3.12.13/code/admin/modules/template-library/Components/StepCategorySelect.vue#L10-L20`.

```vue
<template>
    <div class="category-filter-wrapper">
        <select name="category" id="wpfn-step-category" class="wpfnl-create-funnel__filter-nav" @change="doCatFilter">
            <option value="">All</option>
            <option v-for="(data, index) in categories"
                    :value="data.slug"
                    :key="index"
            >{{ data.name }}</option>
        </select>
        <div class="category-select-dropdown"></div>
    </div>
</template>

<script>
var j = jQuery.noConflict()
export default {
    name: 'StepCategorySelect',
    props: {
        categories: Array,
        activeCategory: String
    },
    mounted: function() {
        var vm = this;
        j(this.$el.getElementsByTagName('select'))
            .select2({ 
                data: this.categories,
                //dropdownParent: j('.category-select-dropdown')
            })
            .val(this.value)
            .trigger("change")
            .on("change", function() {
                vm.$emit("doCatFilter", this.value);
                vm.$emit("doStepCatFilter", this.value);
            });
    },
    data: function () {
        return {
            activeClass: '',
            activeCat: 'all'
        }
    },
    methods: {
        doCatFilter: function (e) {
            this.$emit('doCatFilter', e)
        }
    }

}
</script>

```