| 1 |
<template> |
| 2 |
<div class="category-filter-wrapper"> |
| 3 |
<ul> |
| 4 |
<li @click="doCatFilter('all')" :class="'all' === activeCategory ? 'active' : ''" > |
| 5 |
<CheckWithCircle /> |
| 6 |
All |
| 7 |
</li> |
| 8 |
<li v-for="(data, index) in categories" :class="data.slug === activeCategory ? 'active' : ''" :data-value="data.slug" :key="index" @click="doCatFilter(data.slug)"> |
| 9 |
<BeautyIcon v-if="'beauty' === data.slug" /> |
| 10 |
<BusinessCoachIcon v-if="'business-coach' === data.slug" /> |
| 11 |
<CounselorIcon v-if="'counselor' === data.slug" /> |
| 12 |
<DigitalMarketer v-if="'digital-marketer' === data.slug" /> |
| 13 |
<EbookIcon v-if="'ebook' === data.slug" /> |
| 14 |
<EcommerceShopIcon v-if="'ecommerce-shop' === data.slug" /> |
| 15 |
<EducationalPortalIcon v-if="'educational-portal' === data.slug" /> |
| 16 |
<EmailIcon v-if="'email' === data.slug" /> |
| 17 |
<EvergreenTemplateIcon v-if="'evergreen-template' === data.slug" /> |
| 18 |
<HealthSupplementIcon v-if="'health-supplement-provider' === data.slug" /> |
| 19 |
<LegalAdvisorIcon v-if="'legal-advisor' === data.slug" /> |
| 20 |
<LifeCoachIcon v-if="'life-coach' === data.slug" /> |
| 21 |
<MarketingTutorIcon v-if="'marketing-tutor' === data.slug" /> |
| 22 |
<OnlineCourseIcon v-if="'online-course' === data.slug" /> |
| 23 |
<OnlineFitnessTrainerIcon v-if="'online-fitness-trainer' === data.slug" /> |
| 24 |
<PetCareIcon v-if="'pet-care' === data.slug" /> |
| 25 |
<RealEstateIcon v-if="'real-estate' === data.slug" /> |
| 26 |
<SaasProductIcon v-if="'sass-product' === data.slug" /> |
| 27 |
<SoftwareFirmIcon v-if="'software-firm' === data.slug" /> |
| 28 |
<WebinarIcon v-if="'webniar' === data.slug" /> |
| 29 |
<WeightLossIcon v-if="'weight-loss' === data.slug" /> |
| 30 |
<YogaInstructorIcon v-if="'yoga-instructor' === data.slug" /> |
| 31 |
{{ data.name }} |
| 32 |
</li> |
| 33 |
</ul> |
| 34 |
</div> |
| 35 |
</template> |
| 36 |
|
| 37 |
<script> |
| 38 |
var j = jQuery.noConflict() |
| 39 |
import CheckWithCircle from '../../../src/components/icons/industries-icon/CheckWithCircle.vue' |
| 40 |
import BeautyIcon from '../../../src/components/icons/industries-icon/BeautyIcon.vue' |
| 41 |
import BusinessCoachIcon from '../../../src/components/icons/industries-icon/BusinessCoachIcon.vue' |
| 42 |
import CounselorIcon from '../../../src/components/icons/industries-icon/CounselorIcon.vue' |
| 43 |
import DigitalMarketer from '../../../src/components/icons/industries-icon/DigitalMarketer.vue' |
| 44 |
import EbookIcon from '../../../src/components/icons/industries-icon/EbookIcon.vue' |
| 45 |
import EcommerceShopIcon from '../../../src/components/icons/industries-icon/EcommerceShopIcon.vue' |
| 46 |
import EducationalPortalIcon from '../../../src/components/icons/industries-icon/EducationalPortalIcon.vue' |
| 47 |
import EmailIcon from '../../../src/components/icons/industries-icon/EmailIcon.vue' |
| 48 |
import EvergreenTemplateIcon from '../../../src/components/icons/industries-icon/EvergreenTemplateIcon.vue' |
| 49 |
import HealthSupplementIcon from '../../../src/components/icons/industries-icon/HealthSupplementIcon.vue' |
| 50 |
import LegalAdvisorIcon from '../../../src/components/icons/industries-icon/LegalAdvisorIcon.vue' |
| 51 |
import LifeCoachIcon from '../../../src/components/icons/industries-icon/LifeCoachIcon.vue' |
| 52 |
import MarketingTutorIcon from '../../../src/components/icons/industries-icon/MarketingTutorIcon.vue' |
| 53 |
import OnlineCourseIcon from '../../../src/components/icons/industries-icon/OnlineCourseIcon.vue' |
| 54 |
import OnlineFitnessTrainerIcon from '../../../src/components/icons/industries-icon/OnlineFitnessTrainerIcon.vue' |
| 55 |
import PetCareIcon from '../../../src/components/icons/industries-icon/PetCareIcon.vue' |
| 56 |
import RealEstateIcon from '../../../src/components/icons/industries-icon/RealEstateIcon.vue' |
| 57 |
import SaasProductIcon from '../../../src/components/icons/industries-icon/SaasProductIcon.vue' |
| 58 |
import SoftwareFirmIcon from '../../../src/components/icons/industries-icon/SoftwareFirmIcon.vue' |
| 59 |
import WebinarIcon from '../../../src/components/icons/industries-icon/WebinarIcon.vue' |
| 60 |
import WeightLossIcon from '../../../src/components/icons/industries-icon/WeightLossIcon.vue' |
| 61 |
import YogaInstructorIcon from '../../../src/components/icons/industries-icon/YogaInstructorIcon.vue' |
| 62 |
|
| 63 |
export default { |
| 64 |
name: 'CategoryNav', |
| 65 |
components: { |
| 66 |
CheckWithCircle, |
| 67 |
BeautyIcon, |
| 68 |
BusinessCoachIcon, |
| 69 |
CounselorIcon, |
| 70 |
DigitalMarketer, |
| 71 |
EbookIcon, |
| 72 |
EcommerceShopIcon, |
| 73 |
EducationalPortalIcon, |
| 74 |
EmailIcon, |
| 75 |
EvergreenTemplateIcon, |
| 76 |
HealthSupplementIcon, |
| 77 |
LegalAdvisorIcon, |
| 78 |
LifeCoachIcon, |
| 79 |
MarketingTutorIcon, |
| 80 |
OnlineCourseIcon, |
| 81 |
OnlineFitnessTrainerIcon, |
| 82 |
PetCareIcon, |
| 83 |
RealEstateIcon, |
| 84 |
SaasProductIcon, |
| 85 |
SoftwareFirmIcon, |
| 86 |
WebinarIcon, |
| 87 |
WeightLossIcon, |
| 88 |
YogaInstructorIcon, |
| 89 |
}, |
| 90 |
props: { |
| 91 |
categories: Array, |
| 92 |
activeCategory: String, |
| 93 |
|
| 94 |
}, |
| 95 |
mounted: function() { |
| 96 |
var vm = this; |
| 97 |
j(this.$el.getElementsByTagName('select')) |
| 98 |
.select2({ |
| 99 |
data: this.categories, |
| 100 |
//dropdownParent: j('.category-select-dropdown') |
| 101 |
}) |
| 102 |
.val(this.value) |
| 103 |
.trigger("change") |
| 104 |
.on("change", function() { |
| 105 |
vm.$emit("doCatFilter", this.value); |
| 106 |
vm.$emit("doStepCatFilter", this.value); |
| 107 |
}); |
| 108 |
|
| 109 |
j(document).on('select2:open', function() { |
| 110 |
document.querySelector('.select2-search__field').focus(); |
| 111 |
}); |
| 112 |
}, |
| 113 |
data: function () { |
| 114 |
return { |
| 115 |
activeClass: '', |
| 116 |
activeCat: 'all' |
| 117 |
} |
| 118 |
}, |
| 119 |
methods: { |
| 120 |
doCatFilter: function (slug) { |
| 121 |
|
| 122 |
this.$emit('doCatFilter', slug) |
| 123 |
} |
| 124 |
} |
| 125 |
|
| 126 |
} |
| 127 |
</script> |
