Use select button option as 'primary key'

src/components/SelectButton.vue

@@ -21,12 +21,16 @@
 		name: 'SelectButton',
 		props: ['options', 'value'],
 		data () {
-			//If value prop is an item of options prop,
-			//use that as the default option
-			var index = this.options.indexOf(this.value);
+			var self = this;
+			var index = 0;
 
-			//Otherwise just use the first item
-			if(index === -1) index = 0;
+			if(this.value !== null) {
+				this.options.forEach((option, i) => {
+					if(option.value === self.value) {
+						index = i;
+					}
+				})
+			}
 
 			return {
 				selectedIndex: index,
@@ -41,7 +45,7 @@
 				this.selectedIndex = index;
 				this.hideMenu = true;
 
-				this.$emit('input', this.options[index]);
+				this.$emit('input', this.options[index].value);
 			}
 		}
 	}

src/store/index.js

@@ -10,11 +10,11 @@ export default new Vuex.Store({
 		meta: {
 			name: 'Forum',
 			categories: [
-				{name: 'All categories'},
-				{name: 'category'},
-				{name: 'category'},
-				{name: 'category'},
-				{name: 'category'}
+				{name: 'All categories', value: 'ALL'},
+				{name: 'Technology', value: 'TECHNOLOGY'},
+				{name: 'Food', value: 'FOOD'},
+				{name: 'Programming', value: 'PROGRAMMING'},
+				{name: 'Books', value: 'BOOKS'}
 			]
 		},
 		tabs: {

src/store/modules/index.js

@@ -1,5 +1,5 @@
 const state = {
-	selectedCategory: 0,
+	selectedCategory: 'ALL',
 	threads: [
 		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},
 		{title: 'example title', latestPostUser: 'user', latestPostDate: new Date(), category: 'Category', replies: 30},