blob: c04aa13bf79aca1abb2c25650a3ee8cec4c41831 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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>
|