From 49f1c6eb2973bc78b0a6be9e9db635a16bd9ddfd Mon Sep 17 00:00:00 2001
From: Fuwn <fuwnzy@gmail.com>
Date: Fri, 22 Jan 2021 08:52:09 -0800
Subject: fix, feat: skill rendering issue in subsub_categories. add skills

---
 assets/json/skills.json                      |  5 +++++
 components/ui/interests/InterestsListing.vue | 22 +++++++++++++---------
 components/ui/skills/SkillsListing.vue       | 22 +++++++++++++---------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/assets/json/skills.json b/assets/json/skills.json
index 4ca6b84..a460fa3 100644
--- a/assets/json/skills.json
+++ b/assets/json/skills.json
@@ -28,6 +28,11 @@
       "minecraft": [
         "bukkit"
       ],
+      "jdk": [
+        "adopt",
+        "java",
+        "zulu"
+      ],
       "...": [
         "spark",
         "jda"
diff --git a/components/ui/interests/InterestsListing.vue b/components/ui/interests/InterestsListing.vue
index c04aa13..7876322 100644
--- a/components/ui/interests/InterestsListing.vue
+++ b/components/ui/interests/InterestsListing.vue
@@ -5,7 +5,7 @@
 
       <div class="row">
         <div class="col-lg-8">
-          <div v-for="(category, heading) in interests">
+          <div v-for="(category, heading) in interests" :key="category">
             <!-- Main categories -->
             <h5 :id="heading" class="wow fadeInUp" data-wow-delay="1.2s">
               # {{ heading }}
@@ -13,12 +13,12 @@
 
             <!-- If category is an array... -->
             <ul v-if="Array.isArray(category)">
-              <li v-for="item in category">
+              <li v-for="item in category" :key="item">
                 {{ item }}
               </li>
             </ul>
             <!-- If the category is an object... -->
-            <ul v-for="(sub_category, sub_heading) in category" v-else>
+            <ul v-for="(sub_category, sub_heading) in category" v-else :key="sub_category">
               <!-- Sub categories -->
               <h6 :id="sub_heading">
                 ## {{ sub_heading }}
@@ -26,25 +26,29 @@
 
               <!-- If category is an array... -->
               <ul v-if="Array.isArray(sub_category)">
-                <li v-for="item in sub_category">
+                <li v-for="item in sub_category" :key="item">
                   {{ 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)">
-
+              <ul v-for="(subsub_category, subsub_heading) in sub_category" v-else :key="subsub_category">
                 <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">
+                  <li v-for="item in subsub_category" :key="item">
                     {{ item }}
                   </li>
                 </ul>
+
+                <!-- If the current iterated item is the last of the currently
+                     iterated object, add a line-break... -->
+                <br
+                  v-if="(Object.keys(sub_category).length - 1)
+                    !== Object.keys(sub_category).indexOf(subsub_heading)"
+                >
               </ul>
             </ul>
           </div>
diff --git a/components/ui/skills/SkillsListing.vue b/components/ui/skills/SkillsListing.vue
index 9cd0136..5f0312a 100644
--- a/components/ui/skills/SkillsListing.vue
+++ b/components/ui/skills/SkillsListing.vue
@@ -5,7 +5,7 @@
 
       <div class="row">
         <div class="col-lg-8">
-          <div v-for="(category, heading) in skills">
+          <div v-for="(category, heading) in skills" :key="category">
             <!-- Main categories -->
             <h5 :id="heading" class="wow fadeInUp" data-wow-delay="1.2s">
               # {{ heading }}
@@ -13,12 +13,12 @@
 
             <!-- If category is an array... -->
             <ul v-if="Array.isArray(category)">
-              <li v-for="item in category">
+              <li v-for="item in category" :key="item">
                 {{ item }}
               </li>
             </ul>
             <!-- If the category is an object... -->
-            <ul v-for="(sub_category, sub_heading) in category" v-else>
+            <ul v-for="(sub_category, sub_heading) in category" v-else :key="sub_category">
               <!-- Sub categories -->
               <h6 :id="sub_heading">
                 ## {{ sub_heading }}
@@ -26,25 +26,29 @@
 
               <!-- If category is an array... -->
               <ul v-if="Array.isArray(sub_category)">
-                <li v-for="item in sub_category">
+                <li v-for="item in sub_category" :key="item">
                   {{ 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)">
-
+              <ul v-for="(subsub_category, subsub_heading) in sub_category" v-else :key="subsub_category">
                 <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">
+                  <li v-for="item in subsub_category" :key="item">
                     {{ item }}
                   </li>
                 </ul>
+
+                <!-- If the current iterated item is the last of the currently
+                     iterated object, add a line-break... -->
+                <br
+                  v-if="(Object.keys(sub_category).length - 1)
+                    !== Object.keys(sub_category).indexOf(subsub_heading)"
+                >
               </ul>
             </ul>
           </div>
-- 
cgit v1.2.3