category chooser emits id

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">
+	<select @change="handleSelection" 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">
+		<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>

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>