diff options
Diffstat (limited to 'components/ui/interests/InterestsListing.vue')
| -rw-r--r-- | components/ui/interests/InterestsListing.vue | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/components/ui/interests/InterestsListing.vue b/components/ui/interests/InterestsListing.vue new file mode 100644 index 0000000..c04aa13 --- /dev/null +++ b/components/ui/interests/InterestsListing.vue @@ -0,0 +1,68 @@ +<template> + <div class="container"> + <div class="hero-content"> + <br> + + <div class="row"> + <div class="col-lg-8"> + <div v-for="(category, heading) in interests"> + <!-- Main categories --> + <h5 :id="heading" class="wow fadeInUp" data-wow-delay="1.2s"> + # {{ heading }} + </h5> + + <!-- If category is an array... --> + <ul v-if="Array.isArray(category)"> + <li v-for="item in category"> + {{ item }} + </li> + </ul> + <!-- If the category is an object... --> + <ul v-for="(sub_category, sub_heading) in category" v-else> + <!-- Sub categories --> + <h6 :id="sub_heading"> + ## {{ sub_heading }} + </h6> + + <!-- If category is an array... --> + <ul v-if="Array.isArray(sub_category)"> + <li v-for="item in sub_category"> + {{ item }} + </li> + </ul> + <!-- If the category is an object... --> + <ul v-for="(subsub_category, subsub_heading) in sub_category" v-else> + <!-- If the current iterated item is the last of the current interated object, add a line-break... --> + <br v-if="(Object.keys(sub_category).length - 1) === Object.keys(sub_category).indexOf(subsub_heading)"> + + <h6 :id="subsub_heading"> + ### {{ subsub_heading }} + </h6> + + <!-- If category is an array... --> + <ul v-if="Array.isArray(subsub_category)"> + <li v-for="item in subsub_category"> + {{ item }} + </li> + </ul> + </ul> + </ul> + </div> + </div> + </div> + </div> + </div> +</template> + +<script> +import interests from '../../../assets/json/interests.json' + +export default { + name: 'SkillsListing', + data: () => { + return { + interests + } + } +} +</script> |