Add filtration url

src/components/Team.vue

@@ -6,21 +6,27 @@
 
     <p class="max-w-xl mx-auto mb-12 text-gray-400">{{ description }}</p>
     <div class="flex max-w-lg mx-auto mb-12 justify-center border-b-2">
-      <div v-for="(tag, index) in tags" :key="tag.node.id" class="w-1/3 mr-5 pb-2">
-        <a :href="`/#${selected}`"
-          @click="setSelected('', index)"
-          v-if="index == 0"
+      <div class="w-1/3 mr-5 pb-2">
+        <a
+          href="#"
+          @click="setSelected('', -1)"
           class="pb-2 hover:text-indigo-600 capitalize"
-          :class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == 0 }"
         >
           All
         </a>
-        
-        <a :href="`/#${selected}`"
+      </div>
+
+      <div
+        v-for="(tag, index) in tags"
+        :key="tag.node.id"
+        class="w-1/3 mr-5 pb-2"
+      >
+        <a
+          :href="`#${tag.node.title}`"
           @click="setSelected(tag.node.title, index)"
-          v-if="index != 0"
           class="pb-2 hover:text-indigo-600 capitalize"
-          :class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == index + 1 }"
         >
           {{ tag.node.title.replace("_", " ") }}
         </a>
@@ -40,7 +46,7 @@
           ></g-image>
         </g-link>
         <h3 class="text-xl mb-1 font-semibold font-heading font-semibold">
-          {{ obj.node.name || obj.node.title}}
+          {{ obj.node.name || obj.node.title }}
         </h3>
         <!-- <span>{{ edge.node.title }}</span> -->
       </div>
@@ -49,14 +55,13 @@
 </template>
 
 <script>
-console.log
 export default {
   data() {
-    var selected = this.$route.hash.replace("#", "")
-    var activeIndex = 0
+    var selected = this.$route.hash.replace("#", "");
+    var activeIndex = 0;
 
-    for(var i=0; i < this.tags.length; i++){
-      if (this.tags[i].node.title == selected){
+    for (var i = 0; i < this.tags.length; i++) {
+      if (this.tags[i].node.title == selected) {
         activeIndex = i;
       }
     }
@@ -73,36 +78,34 @@ export default {
     tags: {},
     tagsField: String,
   },
-  computed : {
-    url: function(){
-      return window.location.href + "#" + this.selected
-    }
+  computed: {
+    url: function () {
+      return window.location.href + "#" + this.selected;
+    },
   },
   methods: {
-    setSelected: function(tag, index){
-      this.selected = tag
-      this.activeIndex = index
+    setSelected: function (tag, index) {
+      this.selected = tag;
+      this.activeIndex = index + 1;
     },
 
-    filter: function(tag){
+    filter: function (tag) {
+      if (tag == "") return this.objects;
 
-      if (tag == '')
-        return this.objects
-      
-      var result = []
+      var result = [];
 
-      for(var i=0; i < this.objects.length; i++){
-          var obj = this.objects[i].node;
-          for (var j=0; j<obj[this.tagsField].length; j++){
-            var membership = obj[this.tagsField][j];
-            if (membership.title == tag){
-              result.push(this.objects[i]);
-              break
-            }
+      for (var i = 0; i < this.objects.length; i++) {
+        var obj = this.objects[i].node;
+        for (var j = 0; j < obj[this.tagsField].length; j++) {
+          var membership = obj[this.tagsField][j];
+          if (membership.title == tag) {
+            result.push(this.objects[i]);
+            break;
           }
+        }
       }
       return result;
-    }
-  }
+    },
+  },
 };
 </script>