| 1 |
<template> |
| 2 |
<div class="category-filter-wrapper"> |
| 3 |
<select name="category" id="wpfn-step-category" class="wpfnl-create-funnel__filter-nav" @change="doCatFilter"> |
| 4 |
<option value="">All</option> |
| 5 |
<option v-for="(data, index) in categories" |
| 6 |
:value="data.slug" |
| 7 |
:key="index" |
| 8 |
>{{ data.name }}</option> |
| 9 |
</select> |
| 10 |
<div class="category-select-dropdown"></div> |
| 11 |
</div> |
| 12 |
</template> |
| 13 |
|
| 14 |
<script> |
| 15 |
var j = jQuery.noConflict() |
| 16 |
export default { |
| 17 |
name: 'StepCategorySelect', |
| 18 |
props: { |
| 19 |
categories: Array, |
| 20 |
activeCategory: String |
| 21 |
}, |
| 22 |
mounted: function() { |
| 23 |
var vm = this; |
| 24 |
j(this.$el.getElementsByTagName('select')) |
| 25 |
.select2({ |
| 26 |
data: this.categories, |
| 27 |
//dropdownParent: j('.category-select-dropdown') |
| 28 |
}) |
| 29 |
.val(this.value) |
| 30 |
.trigger("change") |
| 31 |
.on("change", function() { |
| 32 |
vm.$emit("doCatFilter", this.value); |
| 33 |
vm.$emit("doStepCatFilter", this.value); |
| 34 |
}); |
| 35 |
}, |
| 36 |
data: function () { |
| 37 |
return { |
| 38 |
activeClass: '', |
| 39 |
activeCat: 'all' |
| 40 |
} |
| 41 |
}, |
| 42 |
methods: { |
| 43 |
doCatFilter: function (e) { |
| 44 |
this.$emit('doCatFilter', e) |
| 45 |
} |
| 46 |
} |
| 47 |
|
| 48 |
} |
| 49 |
</script> |
| 50 |
|
