From 37378a67ac2b215b91f26efa47d808b5bbc09c37 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Sun, 25 Aug 2024 20:42:08 +0200
Subject: [PATCH] category chooser emits id

---
 src/components/category_chooser.vue | 10 +++++++---
 src/components/show_category.vue    |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/category_chooser.vue b/src/components/category_chooser.vue
index f9d2a7b..07285ac 100644
--- a/src/components/category_chooser.vue
+++ b/src/components/category_chooser.vue
@@ -1,5 +1,6 @@
 <script setup>
-	import { onMounted, ref, watch } from 'vue'
+	import { onMounted, ref, watch, } from 'vue'
+	const emit = defineEmits(['update'])
 	const props = defineProps(['categories'])
 	const instruments = ref([])
 	const chosenInstrument = ref('clarinet')
@@ -8,6 +9,9 @@
 			instruments.value.push(category.instrument)
 		}
 	}
+	const handleSelection = (event)=>{
+		emit('update', event.target.value)
+	}
 </script>
 <template>
 	<h3>Choose Category</h3>
@@ -16,8 +20,8 @@
 			{{instrument}}
 		</option>
 	</select>
-	<select v-for="instrument in instruments" :key="instrument" v-show="instrument == chosenInstrument">
-		<option v-for="category in props.categories" :key="category.id" v-show="category.instrument == instrument" :selected="category.instrument == instrument">
+	<select @change="handleSelection" v-for="instrument in instruments" :key="instrument" v-show="instrument == chosenInstrument">
+		<option v-bind:value="category.id" v-for="category in props.categories" :key="category.id" v-show="category.instrument == instrument" :selected="category.instrument == instrument">
 			{{category.category}}
 		</option>
 	</select>
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
index dffbb9f..cbec514 100644
--- a/src/components/show_category.vue
+++ b/src/components/show_category.vue
@@ -45,7 +45,7 @@
 			{{category.category}}
 		</option>
 	</select>
-	<CategoryChooser v-if="categories.length > 0" :categories="categories" />
+	<CategoryChooser @update="loadCategory" v-if="categories.length > 0" :categories="categories" />
 	<table>
 		<thead>
 			<tr>