You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
838 B
25 lines
838 B
<script setup>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
const props = defineProps(['categories'])
|
|
const instruments = ref([])
|
|
const chosenInstrument = ref('clarinet')
|
|
for(let category of props.categories){
|
|
if(!instruments.value.includes(category.instrument)){
|
|
instruments.value.push(category.instrument)
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<h3>Choose Category</h3>
|
|
<select v-model="chosenInstrument">
|
|
<option v-for="instrument in instruments" v-bind:value="instrument">
|
|
{{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">
|
|
{{category.category}}
|
|
</option>
|
|
</select>
|
|
</template>
|