change the event accordingly

src/components/Navbar.vue

@@ -7,7 +7,7 @@
             </button>
             <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
                 <a class="dropdown-item text-light" href="#" v-for="(event, index) in events" v-bind:key="index"
-                   :class="{ active: event === activeEvent }">{{ event }}</a>
+                   :class="{ active: event === activeEvent }" @click="changeEvent(event)">{{ event }}</a>
             </div>
         </div>
 
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import {mapState} from 'vuex';
+import { mapState, mapActions } from 'vuex';
 
 
 export default {
@@ -52,10 +52,10 @@ export default {
     ]
   }),
   computed: {
-    ...mapState({
+    ...mapState(['events', 'activeEvent'])
-      events: state => state.events,
+  },
-      activeEvent: state => state.activeEvent
+  methods: {
-    })
+    ...mapActions(['changeEvent'])
   }
 };
 </script>

src/store/index.js

@@ -6,6 +6,18 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     events: ['35c3', 'camp19', '36c3'],
-    activeEvent: '35c3'
+    activeEvent: '36c3',
+    loadedItems: []
+  },
+  mutations: {
+    changeEvent(state, event) {
+      state.activeEvent = event;
+    }
+  },
+  actions: {
+    changeEvent({ commit }, event) {
+      // todo: load items from server
+      commit('changeEvent', event);
+    }
   }
 });